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

本文介绍了一个使用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>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值