亚马逊的快速菜单

亚马逊的快速菜单算法及应用场景 -- ECD kamalyu

上下移动--快速切换

斜向二级菜单移动--延时收起当前二级菜单 http://www.amazon.cn/

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" });

服务平台的例子 $menu.menuAim({ // 一级菜单 rowSelector: "[data-menuid]", // 激活菜单 activate:activateSubmenu, //
取消激活 deactivate:deactivateSubmenu // 离开整个菜单区域 ,exitMenu:exitAllMenu });

实现原理 $menu .mouseleave(mouseleaveMenu) .find(options.rowSelector) .mouseenter(mouseenterRow) .mouseleave(mouseleaveRow) .click(clickRow);

实现原理 menuRow.mouseenter(mouseenterRow) // (可能)绑定延时函数 menuRow.click(clickRow) // 立即active当前一级菜单 menuRow.mouseleave(mouseleaveRow) // 删除延时函数
mouseleave(mouseleaveMenu) // 删除延时函数，调用离开菜单区域的回调函数

mouseenterRow possiblyActivate 计算activeDelay , 插件的核心算法部分如果 delay>0 就设置延时再调用 possiblyActivate

核心算法 activeDelay() 如果当前没有展开的二级分类，返回 0；如果是从菜单区域之外进入，返回 0；如果鼠标静止不动，返回 0；计算轨迹，如果朝向二级菜单，返回 delay；
如果没有朝向二级菜单，返回 0；

鼠标轨迹计算一个FIFO的对象，始终记录鼠标最后三个坐标；取第一个和第三个做对比，推断运动方向；

鼠标轨迹计算简化一下 C-B1 C-A1 ------- < -------- B-B1 A-A1

鼠标轨迹计算上方同理 D-B1 D-A1 ------- < -------- B-B1 A-A1 上下左右方向都可以由相同的公式
计算

适用场景一级菜单比较宽

不适用场景一级菜单比较短此时直接给每个菜单加适当的延时更合适鼠标进入另外一个一级菜单的瞬间，不一定朝向二级菜单方向

Thank you

亚马逊的快速菜单

亚马逊的快速菜单

sokamal

More Decks by sokamal

Other Decks in Programming

Featured

Transcript