当前位置： 移动技术网 > IT编程>开发语言>Jquery > jQuery插件,判断鼠标的移入移出方向

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

2019年04月03日  | 移动技术网IT编程  | 我要评论

今天用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);

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

附上使用的图片timg.jpg

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网