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的，博主親測可用！