JS 判断如果进入元素的方位

阅读 1080
收藏 114
2016-12-10
原文链接:www.jianshu.com

最终效果

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

$("li").on("mouseenter mouseleave",function(e) {
           var w = this.offsetWidth;
           var h = this.offsetHeight;
           var x = e.pageX - this.getBoundingClientRect().left - w/2;
           var y = e.pageY - this.getBoundingClientRect().top - h/2;
           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°的位置就在左边的中间了


0度的位置

所以现在的范围变成了
0~44 & 360~315 左边
45~134 上边
135~224 右边
225~314 下边
我们再继续转换,现在我们把算出来的角度除以90,然后四舍五入,可以使得45°为分界线
上边算出来的结果为1


上边


右边算出来的结果为2


右边


下边算出来的结果为3


下边


左边算出来的结果有两种 0~44肯定是为0的 315~360 为4


下边


现在算出来的结果一共有5个值(左边2个,其他三个面各一个)。下面我们再精简一下结果,我们给每次的结果都加上3,然后和4取余
左边加3之后就是3和7,然后取余后为3
上边加3之后为4,取余后为0
右边加3为5,取余为1
下边加3为6,取余为2
我们最终的结果就是 0->上边 1->右边 2->下边 3->左边 然后我们通过控制left和top就可以实现上面的效果了

完整代码地址
ps:没有处理兼容方面的问题,在使用的时候要重新调整下

参考资料

MDN getBoundingClientRect
sentsin.com/web/112.htm…

评论