使用jQuery和CSS3创建方向敏感的图片悬停动效

Direction-Aware Hover Effect with CSS3 and jQuery 鼠标在图片网格中移动时，使用一个浮层从鼠标移动方向滑入当前图片区域，滑出之前的图片区域。

模板，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1799
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

;
(function($, window, undefined) {

'use strict';

$.HoverDir = function(options, element) {

this.$el = $(element);
        this._init(options);

};

// the options
    $.HoverDir.defaults = {
        speed: 300,
        easing: 'ease',
        hoverDelay: 0,
        inverse: false
    };

$.HoverDir.prototype = {

_init: function(options) {

// options
            this.options = $.extend(true, {}, $.HoverDir.defaults, options);
            // transition properties
            this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing;
            // support for CSS transitions
            this.support = Modernizr.csstransitions;
            // load the events
            this._loadEvents();

},
        _loadEvents: function() {

var self = this;

this.$el.on('mouseenter.hoverdir, mouseleave.hoverdir', function(event) {

var $el = $(this),
                    $hoverElem = $el.find('div'),
                    direction = self._getDir($el, {
                        x: event.pageX,
                        y: event.pageY
                    }),
                    styleCSS = self._getStyle(direction);

if (event.type === 'mouseenter') {

$hoverElem.hide().css(styleCSS.from);
                    clearTimeout(self.tmhover);

self.tmhover = setTimeout(function() {

$hoverElem.show(0, function() {

var $el = $(this);
                            if (self.support) {
                                $el.css('transition', self.transitionProp);
                            }
                            self._applyAnimation($el, styleCSS.to, self.options.speed);

});

}, self.options.hoverDelay);

} else {

if (self.support) {
                        $hoverElem.css('transition', self.transitionProp);
                    }
                    clearTimeout(self.tmhover);
                    self._applyAnimation($hoverElem, styleCSS.from, self.options.speed);

}

});

},
        // credits : http://stackoverflow.com/a/3647634
        _getDir: function($el, coordinates) {

// the width and height of the current div
            var w = $el.width(),
                h = $el.height(),

// calculate the x and y to get an angle to the center of the div from that x and y.
                // gets the x value relative to the center of the DIV and "normalize" it
                x = (coordinates.x - $el.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
                y = (coordinates.y - $el.offset().top - (h / 2)) * (h > w ? (w / h) : 1),

// the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
                // first calculate the angle of the point,
                // add 180 deg to get rid of the negative values
                // divide by 90 to get the quadrant
                // add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
                direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

return direction;

},
        _getStyle: function(direction) {

var fromStyle, toStyle,
                slideFromTop = {
                    left: '0px',
                    top: '-100%'
                },
                slideFromBottom = {
                    left: '0px',
                    top: '100%'
                },
                slideFromLeft = {
                    left: '-100%',
                    top: '0px'
                },
                slideFromRight = {
                    left: '100%',
                    top: '0px'
                },
                slideTop = {
                    top: '0px'
                },
                slideLeft = {
                    left: '0px'
                };

switch (direction) {
                case 0:
                    // from top
                    fromStyle = !this.options.inverse ? slideFromTop : slideFromBottom;
                    toStyle = slideTop;
                    break;
                case 1:
                    // from right
                    fromStyle = !this.options.inverse ? slideFromRight : slideFromLeft;
                    toStyle = slideLeft;
                    break;
                case 2:
                    // from bottom
                    fromStyle = !this.options.inverse ? slideFromBottom : slideFromTop;
                    toStyle = slideTop;
                    break;
                case 3:
                    // from left
                    fromStyle = !this.options.inverse ? slideFromLeft : slideFromRight;
                    toStyle = slideLeft;
                    break;
            };

return {
                from: fromStyle,
                to: toStyle
            };

},
        // apply a transition or fallback to jquery animate based on Modernizr.csstransitions support
        _applyAnimation: function(el, styleCSS, speed) {

$.fn.applyStyle = this.support ? $.fn.css : $.fn.animate;
            el.stop().applyStyle(styleCSS, $.extend(true, [], {
                duration: speed + 'ms'
            }));

};

var logError = function(message) {

if (window.console) {

window.console.error(message);

}

};

$.fn.hoverdir = function(options) {

var instance = $.data(this, 'hoverdir');

if (typeof options === 'string') {

var args = Array.prototype.slice.call(arguments, 1);

this.each(function() {

if (!instance) {

logError("cannot call methods on hoverdir prior to initialization; " +
                        "attempted to call method '" + options + "'");
                    return;

}

if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {

logError("no such method '" + options + "' for hoverdir instance");
                    return;

}

instance[options].apply(instance, args);

});

} else {

this.each(function() {

if (instance) {

instance._init();

} else {

instance = $.data(this, 'hoverdir', new $.HoverDir(options, this));

}

});

}

return instance;

};

})(jQuery, window);

$(function() {

$(' #da-thumbs > li ').each(function() {
        $(this).hoverdir();
    });

});

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <div class="container">
        <header class="clearfix">
            <span>Tips &amp; Tricks</span>
            <h1>Direction-Aware <span>Hover Effect</span></h1>
            <p>Moving from one thumb to the other will immediately trigger the sliding of the info box.</p>
        </header>
        <section>
            <ul id="da-thumbs" class="da-thumbs">
                <li>
                    <a href="https://dribbble.com/shots/505046-Menu">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/1.jpg" />
                        <div><span>Menu by Simon Jensen</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/504336-TN-Aquarium">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/2.jpg" />
                        <div><span>TN Aquarium by Charlie Gann</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/504197-Mr-Crabs">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/3.jpg" />
                        <div><span>Mr. Crabs by John Generalov</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/4.jpg" />
                        <div><span>Gallery of Mo 2.Mo logo by Adam Campion</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/503058-Ice-Cream-nom-nom">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/5.jpg" />
                        <div><span>Ice Cream - nom nom by Eight Hour Day</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/502927-My-Muse">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/6.jpg" />
                        <div><span>My Muse by Zachary Horst</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/7.jpg" />
                        <div><span>Natalie & Justin Cleaning by Justin Younger</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/502523-App-Preview">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/8.jpg" />
                        <div><span>App Preview by Ryan Deshler</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/501695-Cornwall-Map">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/9.jpg" />
                        <div><span>Cornwall Map by Katharina Maria Zimmermann</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/500861-final-AD-logo">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/10.jpg" />
                        <div><span>final AD logo by Annette Diana</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/500369-Land-Those-Planes">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/11.jpg" />
                        <div><span>Land Those Planes by Lee Ann Marcel</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://dribbble.com/shots/497795-Seahorse">
                        <img src="https://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/12.jpg" />
                        <div><span>Seahorse by Trevor Basset</span>
                        </div>
                    </a>
                </li>
            </ul>
        </section>
    </div>
    <script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
</body>

</html>

Direction-Aware Hover Effect with CSS3 and jQuery 鼠标在图片网格中移动时，使用一个浮层从鼠标移动方向滑入当前图片区域，滑出之前的图片区域。

模板，教程

编辑器支持Emmet

快捷键

Direction-Aware Hover Effect with CSS3 and jQuery 鼠标在图片网格中移动时，使用一个浮层从鼠标移动方向滑入当前图片区域，滑出之前的图片区域。

模板，教程

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

使用jQuery和CSS3创建交互式图片工作台

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：