Amazon left menu delay z triangle jquery Plugin jquery.menu-aim.js source interpretation

On the left side of the Amazon menu delay, has not been aware of its implementation principle. The dream God mentions the Z triangle, and I don't know what it is. Number 13th is quite free that day, so I can leave when the leaders have signed up. In the afternoon, I found a blog: http://jayuh.com/amazon-site-navigation/

It mentions that the secret of the Amazon menu on the left is that it has a buffer delay area of the triangle.

When the mouse moves within this blue range, there is a delay, so the level two menu on the right does not change immediately.

This plugin was found on GitHub along the blog: Https://github.com/jayuh/jQuery-menu-aim

Look at the source code:

The structure of the plug-in is simple, extending the Menuaim method on the jquery prototype, while Menuaim calls the Init method internally via call.

Specifically, what is written in the Init method?

Now let's look at the Possiblyactivate method:

The Activationdelay method is the most important of the entire plugin, which is to decide whether the left menu is a delay or an immediate response, and we take a look at the first four coordinate points:

Draw a diagram to represent the tolerance:

if (Lastdelayloc &&= = lastdelayloc.x && loc.y = = lastdelayloc.y) {console.log (one);  return 0;}

：

Use a graph to indicate what the above code has done: the blue triangle represents the range of triangles that are drawn according to the current coordinates , and the red triangle represents the range of triangles that were drawn according to the previous coordinates :

One thing to be aware of is that decreasingslope and prevdecreasingslope are negative in their computed results. Because Decreasingcorner is in the upper right corner, the Y value is minimal.

At the very bottom of the Init method is the addition of some event bindings:

End This is my understanding of this plugin, but the dream God also mentions that the Amazon Z triangle implementation of too much trouble, I do not know how his implementation is how to look, and so asked to add ^ ^

Amazon left menu delay z triangle jquery Plugin jquery.menu-aim.js source interpretation