亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理。梦神提到了z三角,我也不知道这是什么东西。13号那天很有空,等领导们签字完我就可以走了。下午的时候,找到了一篇博客:http://jayuh.com/amazon-site-navigation/

它提到亚马逊左侧菜单的秘密在于它有一个三角形的缓冲延迟区域。

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

当鼠标在这个蓝色范围内移动时,会有延迟,所以右侧的二级菜单才不会马上变化。

顺着博客在github找到了这个插件:https://github.com/jayuh/jQuery-menu-aim

来看下源码:

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

插件的结构很简单,在jquery原型上扩展了menuAim方法,而menuAim在内部是通过call调用了init方法。

具体就来看init方法中都写了些什么?

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

现在我们来看possiblyActivate方法:

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

activationDelay方法是整个插件中最重要的,就是它来决定左侧菜单是延迟还是立即响应、我们分段来看,首先四个坐标点:

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

画一个图来表示tolerance的作用:

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

if (lastDelayLoc &&
loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {
console.log(11);
return 0;
}

如图所示:

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

用一张图来表示上面代码干了些什么:色三角形表示根据当前坐标画出来的三角形范围,色三角形表示根据之前坐标画出来的三角形范围:

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

需要注意的一点是, decreasingSlope和prevDecreasingSlope它们计算出来的结果是负值。因为decreasingCorner是在右上角,y值最小。

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

在init方法的最底部,是添加的一些事件绑定:

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

到此为止。这是我对这个插件的理解,不过梦神也提到亚马逊的z三角实现的过于麻烦了,我不知道他的实现方法是怎么样子的,等问到了再补充^^

上一篇:用ajax下载字节流形式的excel文件


下一篇:jquery实现全选,取消,反选的功能&实现左侧菜单