jQuery实现点击水纹波动动画

jQuery点击水纹波动动画原理:

    1.在需要实现水波纹效果的标签中添加<XXX class="ripple-wrapper"></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 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>