jquery判断鼠标移入移出

判断鼠标移入移出方向来实现很赞的效果,百度图片搜索列表中就使用了该效果

下面直接上代码:

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一只京大-鼠标移入移出案例</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
    body{background: #f2f2f2}
    .wrap{width:650px;margin: 100px auto;}
    .wrap .box {width: 200px;height: 100px;background: #ccc;display: inline-block;position: relative;overflow: hidden;}
    .wrap .content{position: absolute;left: 100%;top: 100%;z-index: 2;width: 100%;height: 100%;background:rgba(0,0,0,.6);line-height: 100px;text-align: center;color: #fff;font-size: 30px;font-family: "Microsoft Yahei";}
    .wrap .content.trans {transition:all .3s;backface-visibility: hidden;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"><div class="content">DEMO</div></div>
        <div class="box"><div class="content">DEMO</div></div>
        <div class="box"><div class="content">DEMO</div></div>
    </div>


    <p style="position:absolute;bottom:20px;width:100%;text-align: center;"><a href="http://www.zj1024.com/" target="_blank" style="color: #666;text-decoration: none;">一只京大个人主页 </a><a href="http://www.miibeian.gov.cn/" target="_blank" style="color: #666;text-decoration: none;"> 豫ICP备17051115号</a></p>
<script>
//这个模块完成鼠标方向判断的功能
var MouseDirection = function (element, opts) {
    var $element = $(element);
    //enter leave代表鼠标移入移出时的回调
    opts = $.extend({}, {
        enter: $.noop,
        leave: $.noop
    }, opts || {});
    var dirs = ['top', 'right', 'bottom', 'left'];
    var calculate = function (element, e) {
        /*以浏览器可视区域的左上角建立坐标系*/
        //表示左上角和右下角及中心点坐标
        var x1, y1, x4, y4, x0, y0;
        //表示左上角和右下角的对角线斜率
        var k;
        //用getBoundingClientRect比较省事,而且它的兼容性还不错
        var rect = element.getBoundingClientRect();
        if (!rect.width) {
            rect.width = rect.right - rect.left;
        }
        if (!rect.height) {
            rect.height = rect.bottom - rect.top;
        }
        //求各个点坐标 注意y坐标应该转换为负值,因为浏览器可视区域左上角为(0,0),整个可视区域属于第四象限
        x1 = rect.left;
        y1 = -rect.top;
        x4 = rect.left + rect.width;
        y4 = -(rect.top + rect.height);
        x0 = rect.left + rect.width / 2;
        y0 = -(rect.top + rect.height / 2);
        //矩形不够大,不考虑
        if (Math.abs(x1 - x4) < 0.0001) return 4;
        //计算对角线斜率
        k = (y1 - y4) / (x1 - x4);
        var range = [k, -k];
        //表示鼠标当前位置的点坐标
        var x, y;
        x = e.clientX;
        y = -e.clientY;
        //表示鼠标当前位置的点与元素中心点连线的斜率
        var kk;
        kk = (y - y0) / (x - x0);
        //如果斜率在range范围内,则鼠标是从左右方向移入移出的
        if (isFinite(kk) && range[0] < kk && kk < range[1]) {
            //根据x与x0判断左右
            return x > x0 ? 1 : 3;
        } else {
            //根据y与y0判断上下
            return y > y0 ? 0 : 2;
        }
    };
    $element.on('mouseenter', function (e) {
        var r = calculate(this, e);
        opts.enter($element, dirs[r]);
    }).on('mouseleave', function (e) {
        var r = calculate(this, e);
        opts.leave($element, dirs[r]);
    });
};
</script>
<script>
$(function(){
    var dirData = {
        left: {
            top: '0',
            left: '-100%'
        },
        right: {
            top: '0',
            left: '100%'
        },
        bottom: {
            top: '100%',
            left: '0'
        },
        top: {
            top: '-100%',
            left: '0'
        }
    };
    $('.wrap .box').each(function () {
        new MouseDirection(this, {
            enter: function ($element, dir) {
                //每次进入前先把.trans类移除掉,以免后面调整位置的时候也产生过渡效果
                var $content = $element.find('.content').removeClass('trans');
                //调整位置
                $content.css(dirData[dir]);
                $content[0].offsetWidth;
                //启用过渡
                $content.addClass('trans');
                //滑入
                $content.css({left: '0', top: '0'});
            },
            leave: function ($element, dir) {
                $element.find('.content').css(dirData[dir]);
            }
        });
    });
});
</script>
<!-- 代码部分end -->

</body>
</html>

 

 

 

文章演示地址:判断鼠标移入移出

 

 

 

 

接下来说下原理:

 

以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左

计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h/w 这个比例进行缩小,使得到的点的位置在容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。

 

发布了30 篇原创文章 · 获赞 19 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览