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