亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟，之前一直不知道它的实现原理。梦神提到了z三角，我也不知道这是什么东西。13号那天很有空，等领导们签字完我就可以走了。下午的时候，找到了一篇博客：http://jayuh.com/amazon-site-navigation/
它提到亚马逊左侧菜单的秘密在于它有一个三角形的缓冲延迟区域。
当鼠标在这个蓝色范围内移动时，会有延迟，所以右侧的二级菜单才不会马上变化。
顺着博客在github找到了这个插件：https://github.com/jayuh/jQuery-menu-aim
来看下源码：
插件的结构很简单，在jquery原型上扩展了menuAim方法，而menuAim在内部是通过call调用了init方法。
具体就来看init方法中都写了些什么？
现在我们来看possiblyActivate方法：
activationDelay方法是整个插件中最重要的，就是它来决定左侧菜单是延迟还是立即响应、我们分段来看，首先四个坐标点：
画一个图来表示tolerance的作用：
if (lastDelayLoc && loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) { console.log(11); return 0; }
如图所示：
用一张图来表示上面代码干了些什么：蓝色三角形表示根据当前坐标画出来的三角形范围，红色三角形表示根据之前坐标画出来的三角形范围：
需要注意的一点是， decreasingSlope和prevDecreasingSlope它们计算出来的结果是负值。因为decreasingCorner是在右上角，y值最小。
在init方法的最底部，是添加的一些事件绑定：
到此为止。这是我对这个插件的理解，不过梦神也提到亚马逊的z三角实现的过于麻烦了，我不知道他的实现方法是怎么样子的，等问到了再补充^^
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
