Simple jQuery click water ripple animation example

This time I will bring you a simple jQuery click water ripple animation example. Use jQuery to create a click water ripple animation.What are the precautions?. Here is a practical case. Let’s take a look.

jQuery click water ripple animation principle:
1. Add # to the tag that needs to achieve the water ripple effect. ## 2. The code will position the mouse relative to the label, and draw a 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. You can modify the internal code by yourself, or directly call the $().css({}) method to overwrite
--Encapsulation example address: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016 -4-8/ripplewrapperdemo1/index1.html
-- Unencapsulated example address: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016-4-8/ripplewrapperdemo1/indexlod.html

$(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("
"); 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());/*默认半径为ripple-wrapper宽*/ if(parseInt(ripple_obj.outerWidth())        
  
 点一下 
 
          
  
  adasdsd 
   

Simple image click upload function

The text in ionic app cannot be copied by long pressing , How to paste

The above is the detailed content of Simple jQuery click water ripple animation example. For more information, please follow other related articles on the PHP Chinese website!