這篇文章向大家分享一款 jQuery 菜單插件，用于實(shí)現(xiàn)前幾天網(wǎng)上流傳很廣的 Amazon 主頁(yè)的左上角超快反應(yīng)速度下拉菜單。當(dāng)鼠標(biāo)從菜單中的選項(xiàng)上滑過(guò)時(shí)，子菜單的顯示速度是超快的。我們可以看一下效果：

這個(gè)顯示速度基本是與鼠標(biāo)移動(dòng)同步的，但是絕大多數(shù)網(wǎng)站的下拉菜單在顯示子菜單時(shí)會(huì)都有一定的延遲，但是 Amazon 的下拉菜單沒(méi)有這個(gè)延遲，而且子菜單也不會(huì)在不應(yīng)該的時(shí)候消失。它是怎樣做到這一點(diǎn)的呢？答案是通過(guò)探測(cè)鼠標(biāo)移動(dòng)的方向和軌跡。

想象在鼠標(biāo)當(dāng)前的位置和子菜單的左上角和左下角之間畫(huà)一個(gè)三角形。如果鼠標(biāo)在這個(gè)三角形的范圍之內(nèi)移動(dòng)，那用戶(hù)很有可能是在把鼠標(biāo)從主菜單向子菜單里挪，所以不要立刻更新子菜單。但是如果鼠標(biāo)挪動(dòng)到這個(gè)三角形之外，則可以馬上更新子菜單。這就是 Amazon 主頁(yè)反應(yīng)速度超快的下拉菜單背后的算法。

如果想把這個(gè)菜單邏輯運(yùn)用到你的網(wǎng)站上，可以使用 Khan Academy 工程師 Ben Kamens 寫(xiě)的 jQuery 插件—— menu-aim。

GitHub      插件下載

原文鏈接：http://www.cnblogs.com/lhb25/archive/2013/03/18/amazon-menu-jquery-plugin.html