根据鼠标移入移出方向，实现hover效果-创新互联

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

成都创新互联公司主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务紫金,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：根据鼠标移入移出方向，实现hover效果-创新互联
链接地址：https://www.cdcxhl.com/article46/coooeg.html

成都网站建设公司_创新互联，为您提供用户体验、网站设计公司、小程序开发、面包屑导航、网站建设、软件开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联