亞馬遜左側菜單延遲z三角 jquery外掛程式jquery.menu-aim.js源碼解讀

標籤：style   blog   http   io   color   ar   os   sp   strong   

關於亞馬遜的左側菜單延遲，之前一直不知道它的實現原理。夢神提到了z三角，我也不知道這是什麼東西。13號那天很有空，等領導們簽字完我就可以走了。下午的時候，找到了一篇部落格：http://jayuh.com/amazon-site-navigation/

它提到亞馬遜左側菜單的秘密在於它有一個三角形的緩衝延遲地區。

當滑鼠在這個藍色範圍內移動時，會有延遲，所以右側的二級菜單才不會馬上變化。

順著部落格在github找到了這個外掛程式：https://github.com/jayuh/jQuery-menu-aim

 

來看下源碼：

外掛程式的結構很簡單，在jquery原型上擴充了menuAim方法，而menuAim在內部是通過call調用了init方法。

 

具體就來看init方法中都寫了些什嗎？

現在我們來看possiblyActivate方法：

activationDelay方法是整個外掛程式中最重要的，就是它來決定左側菜單是延遲還是立即響應、我們分段來看，首先四個座標點：

畫一個圖來表示tolerance的作用：

if (lastDelayLoc &&loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {console.log(11);return 0;}

：

用一張圖來表示上面代碼幹了些什麼：藍色三角形表示根據當前座標畫出來的三角形範圍，紅色三角形表示根據之前座標畫出來的三角形範圍：

 

需要注意的一點是， decreasingSlope和prevDecreasingSlope它們計算出來的結果是負值。因為decreasingCorner是在右上方，y值最小。

在init方法的最底部，是添加的一些事件綁定：

到此為止。這是我對這個外掛程式的理解，不過夢神也提到亞馬遜的z三角實現的過於麻煩了，我不知道他的實現方法是怎麼樣子的，等問到了再補充^^

亞馬遜左側菜單延遲z三角 jquery外掛程式jquery.menu-aim.js源碼解讀