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

来源：互联网发布：nemo软件好用么编辑：程序博客网时间：2024/05/12 20:17
<!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>
阅读全文
0 0