jquery ripples水波纹效果

jquery ripples水波纹效果( 涟漪效果)

这个效果是我从bootstrap-material-design上面分离下来的，bootstrap-material-design的一些组件样式我不太不喜欢，但是非常喜欢这个水波纹效果，所以就有了这篇文章：

先上效果图：

点击按钮后，会有一道波纹扩散开来

下面是资源地址：http://pan.baidu.com/s/1pL6LGBh

提取密码: 7y6x

就两文件：

下面是使用教程：

第一步：引入rippels.css 和rippels.js

<link rel="stylesheet" type="text/css" href="css/ripples.css"/>

<script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>

<script src="js/ripples.js" type="text/javascript" charset="utf-8"></script>

第二步：初始化

<script type="text/javascript">

$(function(){

    $("button,a").ripples();

})

</script>

遇到的问题：波纹效果扩散出来了？？如下图：

给元素加上“position：relative”属性即可。

上面的案例是我正在做bootstrap UI 组件优化，引入了bootstrap的，博主亲测可用！