jQuery点击水纹波动动画原理:
1.在需要实现水波纹效果的标签中添加<XXX></XXX>
2.代码会定位 鼠标相对 与 标签的位置，以鼠标点为圆心画圆
3.圆的半径 可以自定义(默认为标签的最大宽或高度)
4.圆点颜色，和动画时间等可以自行修改内部代码，或直接 调用 $().css({})方法 进行覆盖
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());/*默认半径为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"});; }); });
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> <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> 点一下 <div></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> <div> <span></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>