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的，博主亲测可用！

总结

以上是生活随笔为你收集整理的jquery ripples水波纹效果( 涟漪效果)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。