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
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("<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());/*默认半径为ripple-wrapper宽*/ if(parseInt(ripple_obj.outerWidth())<parseInt(ripple_obj.outerHeight())){ R= parseInt(ripple_obj.outerHeight());/*如果高度大于宽半径为ripp,le-wrapper高*/ } 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"});; }); }); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script src="ripple-wrapper.js"></script> <style> .ck { cursor: pointer; display: block; padding: 1em; text-decoration: none; width: 200px; height: 20px; position: relative; overflow: hidden; color: #fff; } </style> </head> <body > <div class="ck" style="background: #5f5f5f"> 点一下 <div class="ripple-wrapper"></div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <style> .ck { background: #ffab91; display: block; padding: 1em; text-decoration: none; width: 200px; height: 20px; position: relative; overflow: hidden; } .ck .bd { background: rgba(0, 0, 0,0.8); border-radius: 50%; width: 0px; height: 0px; position: absolute; -webkit-transform: scale(0); transform: scale(0); opacity: 1; } .dh { animation: ldm 0.8s ; -moz-animation: ldm 0.8s ; -o-animation: ldm 0.8s ; -webkit-animation: ldm 0.8s ; } @-webkit-keyframes ldm { 100% { -webkit-transform: scale(1); opacity: 0 } } @keyframes ldm { 100% { -webkit-transform: scale(1); opacity: 0 } } </style> </head> <body style=" background: #aaab91;"> <div class="ck"> <span class="bd"></span> adasdsd </div> <script> $(".ck").click(function(e){ $(this).find(".bd").removeClass("dh"); var R=6; R= parseInt($(this).outerWidth()); if(parseInt($(this).outerWidth())<parseInt($(this).outerHeight())){ R= parseInt($(this).outerHeight()); } $(this).find(".bd").css({"width":(R*2)+"px","height":(R*2)+"px"}); $(this).find(".bd").css({"left":(e.pageX-$(this).position().left-R)+"px","top":(e.pageY-$(this).position().top-R)+"px" }); // $(this).find(".bd").css({"left":(e.pageX-$(this).position().left-R/2 )+"px","top":(e.pageY-$(this).position().top-R/2 )+"px" }); $(this).find(".bd").addClass("dh"); }); </script> </body> </html>
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!