判斷鼠標移入方向

在觀察不少網站的時候，會有一個特效，遮罩層移入方向會隨着鼠標的移入方向來改變，這樣就須要對鼠標移入的方向進行判斷。

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 之間的一個（分別表明上、右、下、左）。