判断鼠标移入方向

在观察不少网站的时候，会有一个特效，遮罩层移入方向会随着鼠标的移入方向来改变，这样就须要对鼠标移入的方向进行判断。

1 var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); 
2 var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); 
3 var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

 

判断鼠标移入的值落入该区域的哪一个部位，得出鼠标的移入方向。

1)、将判断区域问题转成判断角度。

2）、x和y的计算：

　　该元素的坐标原点是(offsetLeft, offsetTop),那么要转成判断角度，必须将原点拉到该元素的中点上。则中点的坐标是Oz(  offsetLeft + w/2,  offsetTop + h/2  );

那么鼠标落入的点M(e.pageX,e.pageY);

　　若是要将这个点转成以Oz为中心，那么就得换算成 x点：e.pageX - (offsetLeft + w/2) ； y点：e.pageY - (offsetTop + h/2)。

那么x和y就出来了。  (w > h ? (h / w) : 1)和 (h > w ? (w / h) : 1)这两个请先忽略，后面会解释。

3）、Math.atan2(x,y)函数：

　　这个函数返回的值至关于这个点的角度，固然貌似这些编程语言里返回的基本都是弧度。而这代码是用角度来算的因此避免不了弧度和角度的转换，

公式：弧度=角度乘以π后再除以180，

　　　　角度=弧度除以π再乘以180　　

(Math.atan2(y, x) * (180 / Math.PI)  其实等于这个 (Math.atan2(y, x) / ( Math.PI/ 180) 

4）、核心部分，

　　 Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

• +180 ：从第三步咱们能够获得角度了，但为何还要加个180，缘由是原来的坐标轴是(-180,180)度的，加个180那么就都成正的，即(0,360)，这个不难理解。
• /90 ：那为何要除于90呢，要知道90，就必须理解  (w > h ? (h / w) : 1)和 (h > w ? (w / h) : 1) 这段代码的意思将矩形矫正成正方形（特殊矩形的矩形是正方形因此也就有了这种判断，其实判不判段都同样）。若是咱们的元素是个正方形的话，那两条对角线相交的那些角就都是90度了（下图,图中标明的那个角）。
• +3  的意思，只要知道咱们角度区间是从右上方开始算起的，而后顺时针计算的就能够了。该做者想要将结果显示的顺序是 上右下左，因此加三就是将第一区间变成上。
•  Math.round() ,四舍五入，那么问题来，咱们的X轴和Y轴可不是斜着的呀（如图），那这样角度计算不就成问题了。因此就由Math.round()函数发挥做用了，好比计算下0-90中任何一个数除于除于90，咱们能够获得 0~1之间的数，若是加个四舍五入呢？那么结果就只有0和1了，恰好45度角是咱们分割线。（只能说写出这个代码的人牛）
• %4取余，保证结果是0、一、二、3 之间的一个（分别表明上、右、下、左）。