Vertical navigation code based on jQuery Mouse clicking water wave animation, jquery Mouse clicking

Vertical navigation code based on jQuery Mouse clicking water wave animation, jquery Mouse clicking

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 Online Preview source code

Implementation 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>

Via: http://www.w2bc.com/article/2015-12-04-jquery-click-animate-nav