根据鼠标移入移出方向，实现hover效果

首先，我们要判断鼠标移入对象的方向：
先获取该对象的左边距，然后通过判断鼠标距离上面、左面、右面、下面的值的最小值，来获取鼠标移入对象的方向。

JS代码：
;(function($){
$.fn.extend({
    dirMove:function(){
        var $outer=this;
        var $mask=this.find("#mask");

        var disL = $outer.offset().left;
        var disT = $outer.offset().top;
        var disR = disL + $outer.outerWidth();
        var disB = disT + $outer.outerHeight();

        $outer.hover(function(e){
            Confirmdir(e);   
        },function(e){
            Confirmdir(e);
        });

        function Confirmdir(e){  //确定具体鼠标移入对象的方向
            var dirL = Math.abs(e.pageX - disL);
            var dirT = Math.abs(e.pageY - disT);
            var dirR = Math.abs(e.pageX - disR);
            var dirB = Math.abs(e.pageY - disB);

            var dir = Math.min(dirL,dirT,dirR,dirB);//取得最小值

            if(e.type=="mouseenter"){
                switch(dir){
                    case dirL:
                        mouseIn("left");
                        break;
                    case dirT:
                        mouseIn("top");
                        break;
                    case dirR:
                        mouseIn("right");
                        break;
                    case dirB:
                        mouseIn("bottom");
                        break;
                }
            }else{
                switch(dir){
                    case dirL:
                        mouseOut("left");
                        break;
                    case dirT:
                        mouseOut("top");
                        break;
                    case dirR:
                        mouseOut("right");
                        break;
                    case dirB:
                        mouseOut("bottom");
                        break;
                }
            }

        }

        function mouseIn(dir){
            switch(dir){
                case "left":
                    $mask.css({"left":-$outer.outerWidth(),"top":0}).show().stop(true,true).animate({"left":0});
                    break;

                case "top":
                    $mask.css({"left":0,"top":-$outer.outerHeight}).show().stop(true,true).animate({"top":0});
                    break;

                case "right":
                    $mask.css({"left":$outer.outerWidth(),"top":0}).show().stop(true,true).animate({"left":0});
                    break;
                case "bottom":
                    $mask.css({"left":0,"top":$outer.outerHeight}).show().stop(true,true).animate({"top":0});
                    break;
            }
        }

        function mouseOut(dir){
            switch(dir){
                case "left":
                    $mask.stop(true,true).animate({"left":-$outer.outerWidth()});
                    break;

                case "top":
                    $mask.stop(true,true).animate({"top":-$outer.outerHeight()});
                    break;

                case "right":
                    $mask.stop(true,true).animate({"left":$outer.outerWidth()});
                    break;
                case "bottom":
                    $mask.stop(true,true).animate({"top":$outer.outerHeight()});
                    break;
            }
        }
    }
})
})(jQuery);

HTML代码：

$(".outer").each(function(){
            $(this).dirMove();
})

转载于:https://blog.51cto.com/14072794/2325579