反正切函数atan2(x,y):返回-PI 到 PI 之间的值,是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度 [-π, π] ,并利用角度值计算出鼠标移入容器的方向。
其计算原理:以div容器的中心点为圆心。对比(宽和高)的值,如取最小的高度值来作为圆的直径画一个圆(如图下)。将圆划分四个象限[?/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4);鼠标进入容器时的atan2(y,x)值分别在容器的下,右,上,左。
下面为JQuery的计算代码:
主要判断方向代码:var direction = Math.round(((Math.atan2(posY,posX) * (180/Math.PI) + 180)/90)+3)%4;得到进入或退出方向,下步我们就可以围绕着点进行相关的动画效果设计,如蒙版层的显示或退出的动画效果,提升产品用户体验值。
微信号:大漠菰鹰。相互学习和交流。