jQuery实现点击水纹波动动画

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

1.在需要实现水波纹效果的标签中添加

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(“