JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

 本文要介绍的是一种鼠标从一个元素移入移出时，获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在移入移出时，是从上下左右的哪个方向发生的。这个思路，是我自己琢磨出来，利用了一点曾经高中学过的数学知识，但是非常简单好理解，希望能对你有所帮助。

在线demo：

http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html

http://liuyunzhuge.github.io/blog/mouse_direction/demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS用斜率判断鼠标进入DIV四个方向的方法</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #3295F2;
        }
    </style>
</head>
<body>
    <div class="box" id="div1" tabindex="1"></div>
    <script>
       window.onload = function () {
            var oDiv = document.getElementById('div1');
            var x1 = oDiv.offsetLeft,
                y1 = -oDiv.offsetTop, //注意坐标，所有的y坐标都是负数
                x2 = x1 + oDiv.offsetWidth,
                y2 = y1 - oDiv.offsetHeight, //同样y坐标为负数
                x0 = (x1 + x2) / 2,
                y0 = (y1 + y2) / 2;
            var k = (y2 - y1) / (x2 - x1); //斜率k
            // alert(-k)
            oDiv.onmouseover = function (e) {
                var e = e || window.event;
                var x = e.clientX, //鼠标刚移入div内，记录下当前的x坐标
                    y = -e.clientY; //鼠标刚移入div内，记录下当前的y坐标
                var K = (y - y0) / (x - x0); //K是鼠标移入点和中心点的斜率
                //当K大于k并且小于-k时，则肯定是左右移入，当移入点的x坐标大于中心点 ，则为右移入，小于则是左移入
                if (k < K && K < -k) {
                    if (x > x0) {
                        alert('右');
                    } else {
                        alert('左');
                    }
                } else {
                    //注意此处y是负数，判断上下的方法同上
                    if (y > y0) {
                        alert('上');
                    } else {
                        alert('下');
                    }
                }
            }
        }
    </script>
</body>
</html>

相关链接： http://www.cnblogs.com/lyzg/p/5689761.html#commentform

posted @ 2019-04-02 02:26  笠航  阅读(330)  评论(0)  编辑  收藏  举报