"Front-end" JavaScript implements navigation bar spreading effects

Implementation results:

The implementation effect is as shown

Implementation principle:

What is a somersault cloud effect:

• The effect is simple, that is, when you move the mouse over the other navigation directory, there will be a background image to slide to the current directory with the mouse.

Implementation ideas:

• When the mouse passes, use offsetleft to get the distance from the left side of the current box and assign this value to the end value of the easing animation.
• When clicked, remember the current offsetleft value, and when the mouse passes, the offsetleft of the previous click is given now.

Implementation code:

Here is the implementation code and a detailed comment, the core setting a span tag position to absolute, by binding mouse events, with the encapsulated animate animation to achieve the "wings of the Cloud" effect of span.

<! DOCTYPE html>
　　
"Front-end" JavaScript implements navigation bar spreading effects