实现Amazon超快下拉菜单的jQ插件

开发 前端
这个显示速度基本是与鼠标移动同步的,但是绝大多数网站的下拉菜单在显示子菜单时会都有一定的延迟,但是 Amazon 的下拉菜单没有这个延迟,而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢?

这篇文章向大家分享一款 jQuery 菜单插件,用于实现前几天网上流传很广的 Amazon 主页的左上角超快反应速度下拉菜单。当鼠标从菜单中的选项上滑过时,子菜单的显示速度是超快的。我们可以看一下效果:

这个显示速度基本是与鼠标移动同步的,但是绝大多数网站的下拉菜单在显示子菜单时会都有一定的延迟,但是 Amazon 的下拉菜单没有这个延迟,而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢?答案是通过探测鼠标移动的方向和轨迹。

想象在鼠标当前的位置和子菜单的左上角和左下角之间画一个三角形。如果鼠标在这个三角形的范围之内移动,那用户很有可能是在把鼠标从主菜单向子菜单里挪,所以不要立刻更新子菜单。但是如果鼠标挪动到这个三角形之外,则可以马上更新子菜单。这就是 Amazon 主页反应速度超快的下拉菜单背后的算法。

如果想把这个菜单逻辑运用到你的网站上,可以使用 Khan Academy 工程师 Ben Kamens 写的 jQuery 插件—— menu-aim。

GitHub      插件下载

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

责任编辑:张伟 来源: 博客园
相关推荐

2009-09-11 09:17:00

C# Button

2020-07-20 12:31:33

UI下拉工菜单设计

2009-04-02 09:08:00

下拉菜单脚本导航设计CSS

2024-09-23 00:00:00

下拉菜单UI控件

2009-07-02 14:18:13

JSP JavaScr下拉菜单

2014-02-24 13:49:13

HTML5CSS3下拉菜单

2012-05-29 10:36:43

jQuery

2020-07-20 14:04:34

Excel下拉菜单数据

2012-05-28 09:50:32

jQuery插件

2012-06-06 15:20:18

jQuery

2021-12-09 08:43:46

Windows 11操作系统微软

2012-05-08 09:38:03

jQuery

2023-07-04 22:11:06

Windows 11微软

2009-11-13 10:06:22

Visual Stud

2022-08-24 16:08:22

ETS鸿蒙

2010-09-13 13:35:39

CSS属性

2021-07-15 09:10:07

Terminal 1.操作系统微软

2021-06-01 09:02:06

PythonClassPython基础

2012-06-13 13:37:49

PHP

2011-01-26 15:14:48

jQueryjavascriptWeb
点赞
收藏

51CTO技术栈公众号