亚马逊的快速菜单

快速展开的菜单原理介绍，以及 jQuery-menu-aim 插件使用

Transcript

1. 亚马逊的快速菜单 算法及应用场景 -- ECD kamalyu
2. 上下移动--快速切换
3. 斜向二级菜单移动--延时收起当前二级菜单 http://www.amazon.cn/
4. jQuery-menu-aim https://github.com/kamens/jQuery-menu-aim .menuAim({ activate: function() {}, deactivate: function() {}, enter: function() {}, exit: function() {}, exitMenu: function() {}, rowSelector: "> li",... // "left", "above", or "below". Defaults to "right". submenuDirection: "right" });
5. 服务平台的例子 $menu.menuAim({ // 一级菜单 rowSelector: "[data-menuid]", // 激活菜单 activate:activateSubmenu, // 取消激活 deactivate:deactivateSubmenu // 离开整个菜单区域 ,exitMenu:exitAllMenu });
6. 实现原理 $menu .mouseleave(mouseleaveMenu) .find(options.rowSelector) .mouseenter(mouseenterRow) .mouseleave(mouseleaveRow) .click(clickRow);
7. 实现原理 menuRow.mouseenter(mouseenterRow) // (可能)绑定延时函数 menuRow.click(clickRow) // 立即active当前一级菜单 menuRow.mouseleave(mouseleaveRow) // 删除延时函数 mouseleave(mouseleaveMenu) // 删除延时函数，调用离开菜单区域的回调函 数
8. mouseenterRow possiblyActivate 计算activeDelay , 插件的核心算法部分 如果 delay>0 就设置延时再调用 possiblyActivate
9. 核心算法 activeDelay() 如果当前没有展开的二级分类，返回 0； 如果是从菜单区域之外进入，返回 0； 如果鼠标静止不动，返回 0； 计算轨迹，如果朝向二级菜单，返回 delay； 如果没有朝向二级菜单，返回 0；
10. 鼠标轨迹计算 一个FIFO的对象，始终记录鼠标最后三个坐标； 取第一个和第三个做对比，推断运动方向；
11. 鼠标轨迹计算 简化一下 C-B1 C-A1 ------- < -------- B-B1 A-A1
12. 鼠标轨迹计算 上方同理 D-B1 D-A1 ------- < -------- B-B1 A-A1 上下左右方向都可以由相同的公式 计算
13. 适用场景 一级菜单比较宽
14. 不适用场景 一级菜单比较短 此时直接给每个菜单加适当的延时更合适 鼠标进入另外一个一级菜单的瞬间，不一定朝向二级菜单方向
15. Thank you