jQuery插件,判断鼠标的移入移出方向

来源：cnblogs　　作者：凌晨肆点的洛杉矶　　时间：2019/4/3 16:24:14　　对本文有异议

今天用jQuery封装了一个简单的插件，判断鼠标的移入移出方向，以后的项目中可能还会遇到这样一个简单的效果，就记录下来吧！

先看结构和样式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>判断鼠标移入移出方向</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .outer {
            width: 400px;
            height: 300px;
            border: 2px solid orange;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .outer img{
            width: 400px;
            height: 300px;
        }
        .outer div {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.5;
            display: none;
            line-height: 300px;
            color: white;
        }
    </style>
</head>
<body>
<div class="outer">
    <img src="timg.jpg">
    <div class="mask">如果有来生，有没有人爱，我也要努力做一个可爱的人。</div>
</div>
 
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.hover.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $(".outer").fangxiang();
        
    })
    
</script>
</body>
</html>

下面是封装的jquery.hover.js

;(function($){
    $.fn.fangxiang = function(){
        var disL = $(this).offset().left;
        var disR = disL + $(this).outerWidth();
        var disT = $(this).offset().top;
        var disB = disT + $(this).outerHeight();
        
        $(this).hover(function(e){
            var dirL = Math.abs(e.clientX-disL);
            var dirR = Math.abs(e.clientX-disR);
            var dirT = Math.abs(e.clientY-disT);
            var dirB = Math.abs(e.clientY-disB);
            
            var dir = Math.min(dirL,dirR,dirT,dirB);
            
            switch(dir){
                case dirL:
                    $(this).find("div").show().css({"left":-$(this).outerWidth(),"top":0}).stop().animate({"left":0},500);
                    break;
                case dirR:
                    $(this).find("div").show().css({"left":$(this).outerWidth(),"top":0}).stop().animate({"left":0},500);
                    break;
                case dirT:
                    $(this).find("div").show().css({"top":-$(this).outerHeight(),"left":0}).stop().animate({"top":0},500);
                    break;
                case dirB:
                    $(this).find("div").show().css({"top":$(this).outerHeight(),"left":0}).stop().animate({"top":0},500);
                    break;
            }
            
            
        },function(e){
            var dirL = Math.abs(e.clientX-disL);
            var dirR = Math.abs(e.clientX-disR);
            var dirT = Math.abs(e.clientY-disT);
            var dirB = Math.abs(e.clientY-disB);
            
            var dir = Math.min(dirL,dirR,dirT,dirB);
            
            switch(dir){
                case dirL:
                    $(this).find("div").stop().animate({"left":-$(this).outerWidth()},500);
                    break;
                case dirR:
                    $(this).find("div").stop().animate({"left":$(this).outerWidth()},500);
                    break;
                case dirT:
                    $(this).find("div").stop().animate({"top":-$(this).outerHeight()},500);
                    break;
                case dirB:
                    $(this).find("div").stop().animate({"top":$(this).outerHeight()},500);
                    break;
            }
        })
    }
})(jQuery);

jquery.hover.js

感觉写的不是很完美，需要借助我写的这个结构才能使用，请大神帮忙优化！

附上使用的图片timg.jpg

原文链接：http://www.cnblogs.com/zhanglongke/p/10640690.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章