div鼠标移入移出的方向判断

最新推荐文章于 2024-04-29 14:41:33 发布

转载最新推荐文章于 2024-04-29 14:41:33 发布 · 830 阅读

文章标签：

#div移入移出方向判

鼠标方向专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的鼠标悬停方向检测功能。当鼠标进入指定元素时，可以判断出鼠标是从哪个方向进入，并显示相应的提示。此功能通过计算鼠标的相对位置并利用数学函数确定其相对于元素中心的方向。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            background: red;

            margin: 50px auto;
        }
    </style>


    <script>
        window.onload = function () {
            var gaga = function (wrap) {
                var wrap = document.getElementById(wrap);
                var hoverDir = function (e) {
                        //取得对象的宽高
                    var w = wrap.offsetWidth,
                        h = wrap.offsetHeight,

                        /**
                         * 解释:
                         *      x = (e.clientX - (wrap.offsetLeft + ( w / 2 ))) * ( w > h ? ( h / w ) : 1)
                         *      y = (e.clientY - (wrap.offsetTop + (h / 2))) * (h > w ? (w / h) : 1)
                         *
                         *      wrap.offsetLeft + ( w / 2 )和wrap.offsetTop + (h / 2)  将坐标原点转移到对象的中心点上
                         *      w > h ? ( h / w ) : 1和 h > w ? (w / h) : 1  将矩形校正为正方形
                         *
                         * 如:
                         *      一个长8宽6的矩形,将(0,0)坐标移动到该矩形的中心点后,则:四个顶点的坐标是(-4,3),(4,3),(4,-3),(-4,-3)
                         *      通过校正方法校正后的坐标是:(-3,3),(3,3),(3,-3),(-3,-3);同理,矩形框里的所有左边都变到了校正后的正方形上;
                         */
                        x = (e.clientX - (wrap.offsetLeft + ( w / 2 ))) * ( w > h ? ( h / w ) : 1),
                        y = (e.clientY - (wrap.offsetTop + (h / 2))) * (h > w ? (w / h) : 1),

                        /**
                         *解释：
                         *      Math.round(( ( ( Math.atan2(y, x) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3) % 4
                         *
                         *      Math.atan2(y,x): -PI 到 PI 之间的值，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的弧度。
                         *      弧度与角度转换的公式:
                         *             弧度=角度乘以π后再除以180，　　　　
                         *             角度=弧度除以π再乘以180　
                         *      ( Math.atan2(y, x) * ( 180 / Math.PI ): 将弧度转成角度.
                         *
                         *      +180: 因为在原来的坐标系中，角度范围是(-180,180);这里+180　是为了变成(0,360),以便后面的计算;
                     *   *           console.log('Math.atan2(12,12)....'+Math.atan2(12,12)/(Math.PI/180));    //Math.atan2(12,12)....45
                         *           console.log('Math.atan2(0,12)....'+Math.atan2(12,-12)/(Math.PI/180));    //Math.atan2(0,12)....135
                         *           console.log('Math.atan2(-12,12)....'+Math.atan2(-12,-12)/(Math.PI/180)); //Math.atan2(-12,12)....-135
                         *           console.log('Math.atan2(-12,12)....'+Math.atan2(-12,12)/(Math.PI/180));  //Math.atan2(-12,12)....-45
                         *           console.log('Math.atan2(0,-12)....'+Math.atan2(0,-12)/(Math.PI/180));    //Math.atan2(0,-12)....180
                         *           console.log('Math.atan2(0,12)....'+Math.atan2(0,12)/(Math.PI/180));      //Math.atan2(0,12)....0
                         *
                         *      /90:  因为对象通过校正变成正方形，正方形的对角线将对对象分成四个区域，且对角线的夹角是直角,
                         *
                         *      +3 : 只要知道我们角度区间是从右上方开始算起的，然后顺时针计算的就可以了。该作者想要将结果显示的顺序是 上右下左，所以加三就是将第一区间变成上。
                         *
                         *      Math.round() : 四舍五入．比如计算下0-90中任何一个数除于除于90，我们可以得到 0~1之间的数，如果加个四舍五入呢？那么结果就只有0和1了，刚好45度角是我们分割线。
                         *
                         *      %4 : 保证结果是0、1、2、3 之间的一个（分别代表上、右、下、左）。
                         *
                         */

                        // 上(0) 右(1) 下(2) 左(3)
                        direction = Math.round(( ( ( Math.atan2(y, x) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3) % 4,
                        eventType = e.type,
                        dirName = new Array('上方', '右侧', '下方', '左侧');
                    if (eventType == 'mouseover' || eventType == 'mouseenter') {
                        wrap.innerHTML = dirName[direction] + '进入';
                    } else {
                        wrap.innerHTML = dirName[direction] + '离开';
                    }
                }
                if (window.addEventListener) {
                    wrap.addEventListener('mouseover', hoverDir, false);
                    wrap.addEventListener('mouseout', hoverDir, false);
                } else if (window.attachEvent) {
                    wrap.attachEvent('onmouseenter', hoverDir);
                    wrap.attachEvent('onmouseleave', hoverDir);
                }
            }
            gaga('div');
        }
    </script>

</head>
<body>
<div id="div"></div>
</body>
</html>