實現 Amazon 超快反應速度下拉選單的 jQuery 外掛

發表於2013-03-18

來源:夢想天空的部落格

這篇文章向大家分享一款jQuery選單外掛,用於實現前幾天網上流傳很廣的 Amazon 主頁的左上角超快反應速度下拉選單。當滑鼠從選單中的選項上滑過時,子選單的顯示速度是超快的。我們可以看一下效果:

實現 Amazon 超快反應速度下拉選單的 jQuery 外掛

這個顯示速度基本是與滑鼠移動同步的,但是絕大多數網站的下拉選單在顯示子選單時會都有一定的延遲,但是 Amazon 的下拉選單沒有這個延遲,而且子選單也不會在不應該的時候消失。它是怎樣做到這一點的呢?答案是通過探測滑鼠移動的方向和軌跡。

實現 Amazon 超快反應速度下拉選單的 jQuery 外掛

想象在滑鼠當前的位置和子選單的左上角和左下角之間畫一個三角形。如果滑鼠在這個三角形的範圍之內移動,那使用者很有可能是在把滑鼠從主選單向子選單裡挪,所以不要立刻更新子選單。但是如果滑鼠挪動到這個三角形之外,則可以馬上更新子選單。這就是 Amazon 主頁反應速度超快的下拉選單背後的演算法。

如果想把這個選單邏輯運用到你的網站上,可以使用 Khan Academy 工程師 Ben Kamens 寫的 jQuery 外掛—— menu-aim。

實現 Amazon 超快反應速度下拉選單的 jQuery 外掛

專案主頁下載地址

相關文章