jquery Implementation Click on the watermark Wave animation _jquery

jquery Click on the watermark motion animation principle:

1. Add <xxx class= "Ripple-wrapper" in a label that requires water ripple effects ></XXX>
2. The code positions the mouse relative to the label and draws the circle with the mouse point as the center.
3. The radius of the circle can be customized (the default is the maximum width or height of the label)
4. Dot color, and animation time, etc. can modify the internal code, or directly call the $ (). CSS ({}) method to overwrite

Ripple-wrapper.js

$ (function () {$ (". Ripple-wrapper"). css ({"position": "Absolute", "Top": "0", "Left": "0", "Z-index": "  1 "," width ":" 100% "," height ":" 100% "," Overflow ":" Hidden "," Border-radius ":" Inherit "," Pointer-events ":"
    None "});
     $ (". Ripple-wrapper"). Parent (). Click (function (e) {var ripple_obj=$ (this). Find (". Ripple-wrapper");
     if (Ripple_obj.find ("div"). Length) {ripple_obj.find ("div"). Remove ();}
     Ripple_obj.prepend ("<div></div>");
     var ripple_div=ripple_obj.find ("div");
  Ripple_div.css ({"Display": "Block", "Background": "Rgba (255, 255, 255, 0.7)", "Border-radius": "50%", "Position": "Absolute", "-webkit-transform": "Scale (0)", "Transform": "scale (0)", "Opacity": "1", "transition" : ' All 0.7s ', '-webkit-transition ': ' All 0.7s ', '-moz-transition ': ' All 0.7s ', '-o-transition ': ' All 0.7s ', ' Z
     -index ":" 1 "," Overflow ":" Hidden "," pointer-events ":" None "}); var r= parseint (Ripple_obj.outerwidth ())/* The default radius is ripple-wrapper width/if (parseint (Ripple_obj.outerwidth ()) <parseint (Ripple_ Obj.outerheight ())) {r= parseint (ripple_obj.outerheight ()); * If the height is greater than the width radius of ripp,le-wrapper high/} Ripple_div . css ({"width":(r*2) + "px", "height":(r*2) + "px", "Top": (E.pagey-ripple_obj.offset (). Top-r) + ' px ', "left": (E.pagex-
    Ripple_obj.offset (). Left-r) + ' px ', "transform": "Scale (1)", "-webkit-transform": "Scale (1)", "opacity": "0"});; 
    
    });

 });

Html

<! DOCTYPE html>
 
 

Demo diagram

Code not encapsulated

<! DOCTYPE html>