如何用js代码来判断鼠标移入的方向呢?基本思路是将一个元素按照对角线分成4份,然后按照鼠标事件返回的角度值来判断。
左上角是坐标的原点,为了计算方便,并且可以区分上下左右,将原点移到元素的中心。
var x=e.clientX-(obj.offsetLeft+obj.offsetWidth/2);
var y=e.clientY-(obj.offsetTop+obj.offsetHeight/2);
接下去就是核心部分了,Math.atan2(y,x)方法返回这个角的弧度值
Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
(1)为什么要加180?因为Math.atan2(y,x)返回的是-PI到PI,也就是-180°到180°的角度范围,加上180之后可以转为0-360°的范围,便于计算。
(2)为什么要除以90 因为要分成四个部分,(0-360)/90
(3)为什么要加上3 其实不加也可以,因为加上180以后,0左边1上边2右边3下边
加上3之后再取模%4就是0上边1右边2下边3左边,符合上右下左的css顺序。