JS判断鼠标移入元素的方向

最终效果

这里的关键主要是判断鼠标是从哪个方向进入和离开的

$("li").on("mouseenter mouseleave",function(e) {
           var w = this.offsetWidth;
           var h = this.offsetHeight;
           var toTop = this.getBoundingClientRect().top + document.body.scrollTop;  //兼容滚动条
           var x = (e.pageX - this.getBoundingClientRect().left - (w / 2)) * (w > h ? (h / w) : 1);   //获取当前鼠标的x轴位置
           var y = (e.pageY - toTop - h/2) * (h > w ? (w / h) : 1);
          //上面对长方形也做了兼容，也就是按照最小的那个边的一半作为半径了
          //例如有一个宽6，高是2的矩形 右上角的坐标就是{x:3,y:1}，经过上面的计算后{x:2/6 * 3,y:1}=》{x:1,y:1}   算出来也就是45°的样子
          //如果是正方形，可以去掉后面的系数（w>h && h>w）
           var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
           var eventType = e.type;
           var res = Math.atan2(y, x) / (Math.PI / 180) + 180 ;
           $('.line').css('transform','rotate('+ res +'deg)');
           
           // console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180));
           // console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4);
           var dirName = new Array('上方','右侧','下方','左侧');
           
            $('.res').text(res + 'deg');
           
           if(eventType == 'mouseenter'){
              $('.res').text(dirName[direction]+'进入');
              animationIn(direction);
          }else{
              $('.res').text(dirName[direction]+'离开');
              animationOut(direction);
          }
      });

demo
上面代码的重点主要是在direction的值的计算
Math.atan2(y,x) 返回-PI 到 PI 之间的值(负180°到正180°)，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度这里的结果是一个弧度值。那如何把这个值转换为角度呢
我们可以先算出一个角度的弧度值(Math.PI / 180) ，然后用上面计算出来的结果除以一度的弧度值

从上图可以看出，当鼠标从右边进入的时候，角度是在-45°~45°之间的底部是45~135 左边135_180&-180-135 顶部是 -135 ~ -45
因为上面计算出来的结果不符合我们的习惯，并且负值在计算的时候会影响正确性，现在我们给这个结果加上180 让角度范围变成我们习惯的0~360°。当加上180之后 0°的位置就在左边的中间了