Click the navigation menu based on jQuery, and download the water wave animation effect with the source code. The jquery navigation menu

Click the navigation menu based on jQuery, and download the water wave animation effect with the source code. The jquery navigation menu

Click the vertical navigation code of the Water Animation Based on jQuery mouse. This is a vertical navigation bar effect with animation effects based on jQuery + CSS3. As follows:

Download the effect display source code

Html code:

<Div class = "nav"> <ul> <li> <a> website homepage </a> </li> <a> about us </a> </li> <a> product center </a> </li> <a> success stories </a> </li> <> Contact Us </a> </li> <a> online message </a> </li> </ul> </div> <script type =" text/javascript "src =" js/jquery. min. js "> </script> <script type =" text/javascript "> // jQuery time var parent, ink, d, x, y; $ (". nav ul li "). click (function (e) {parent = $ (this ). parent (); // create. ink element if it doesn' t e Xist if (parent. find (". ink "). length = 0) parent. prepend ("<span class = 'ink '> </span>"); ink = parent. find (". ink "); // incase of quick double clicks stop the previous animation ink. removeClass ("animate"); // set size. ink if (! Ink. height ()&&! Ink. width () {// use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element. d = Math. max (parent. outerWidth (), parent. outerHeight (); ink.css ({height: d, width: d });} // get click coordinates // logic = click coordinates relative to page-parent's position relative to page-half of self height/width to make it controllable from the center; x = e. pageX-parent. offset (). left-ink. width ()/2; y = e. pageY-parent. offset (). top-ink. height ()/2; // set the position and add class. animate ink.css ({top: y + 'px ', left: x + 'px '}). addClass ("animate") ;}) </script>

The above code is the core code of this article, which is relatively simple. You can add and delete codes as needed.

Articles you may be interested in:

• Jquery allows you to hide and display animation effects, dynamically decrease the number of characters in the input box, and switch the navigation buttons.
• JQuery implementation example of background switching of a navigation bar
• JQuery allows you to move the mouse over the display navigation drop-down list
• JQuery uses the plug-in Lavalamp to achieve dynamic beautification of navigation bar
• Use jquery animation effects and css to create vertical navigation on the side
• Jquery navigation example with level-2 menu
• JQuery top navigation follows the scroll bar and is fixed to floating on the top