码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-12-03 21:06:38      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:.sh   pre   outer   otto   距离   irb   enter   根据   out   

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

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();
})

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

标签:.sh   pre   outer   otto   距离   irb   enter   根据   out   

原文地址:http://blog.51cto.com/14072794/2325579

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!