這個效果是我從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水波纹效果( 涟漪效果)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。