寫在前面：
這是一篇菜鳥的學習筆記褪尝，記錄效果實現過程闹获，沒有考慮安全、兼容河哑、性等問題避诽。供新手參考，也希望前輩們指點璃谨。
這個漣漪效果是在這篇博客的指導下完成的沙庐。
編寫過程記錄：
寫個漣漪效果真的折騰了好幾天。唉佳吞，畢竟沒有系統學過js拱雏、jquery、css底扳。這個過程中的@KeyFrames也是摸索了幾天铸抑，遇到各種低級錯誤。
大體思路：
漣漪效果實際上就是一個擴展開的圓形div衷模。鼠標點擊按鈕記錄其坐標鹊汛，通過相關計算得出產生漣漪的div坐標菇爪。然后將該div放置好后開啟展開動畫如此而已。
效果描述：
直接看動畫吧柒昏。
waves.gif
代碼要點：
- 用這個方法來得到鼠標點擊坐標：
$(".waves").mousedown(function(e) {})
- 得到當前按鈕的漣漪div：
var wavesDiv = box.find("div");
- css3動畫的定義：
@keyframes animation-definition {
from{
transform: scale(0.1);
opacity: 1;
}
to{
transform: scale(2); /*因為漣漪的大小為標簽的最長邊，為了保證點擊標簽邊緣時熙揍，漣漪也能覆蓋整個標簽职祷，scale值最小應為2*/
opacity: 0;
}
}
- 將動畫“當作”css樣式
.waves-effect-animation{
animation: animation-definition 1s ease-out;
/*兼容各大瀏覽器*/
-moz-animation: animation-definition 1s ease-out;
-webkit-animation: animation-definition 1s ease-out;
-o-animation: animation-definition 1s ease-out;
}
- js中使用動畫
//設置漣漪div樣式，準備播放動畫
wavesDiv.css({
width: wH,
height: wH,
left: nX,
top: nY
}).addClass("waves-effect-animation");//播放動畫
完整代碼：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".waves").mousedown(function(e) {
var box = $(this);
var wavesDiv = box.find("div");
//第一次沒有漣漪div届囚，動態(tài)生成
if(wavesDiv[0] == null){
var div = "<div class='waves-effect'></div>";
box.append(div);
wavesDiv = box.find("div");
}
//設置按鈕樣式為’waves-effect‘即去掉動畫樣式’waves-effect-animation‘
wavesDiv[0].className = 'waves-effect';
//計算漣漪坐標（折算成左上角坐標而非中心點）有梆，漣漪大小（取外標簽最長邊）
var wH = box.width() > box.height() ? box.width() : box.height();
var iX = e.pageX - box.offset().left;
var iY = e.pageY - box.offset().top;
var nX = iX - wH/2;
var nY = iY - wH/2;
//設置漣漪div樣式意系，準備播放動畫
wavesDiv.css({
width: wH,
height: wH,
left: nX,
top: nY
}).addClass("waves-effect-animation");//播放動畫
});
});
</script>
<style>
.waves{
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
border-radius: 3px;
display: inline-block;
outline:none;
border:0;
overflow: hidden;
position:relative;
opacity: 0.9;
text-align:center;
}
.waves:hover{
opacity: 1;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.20),0 3px 12px 0 rgba(0,0,0,0.16);
}
.waves-effect{
border-radius: 100%;
background-color:#D8D8D8;
left: 20px;
top: 20px;
transform: scale(0);
width: 10px;
height: 10px;
position:absolute;
}
.waves-effect-animation{
animation: animation-definition 1s ease-out;
/*兼容各大瀏覽器*/
-moz-animation: animation-definition 1s ease-out;
-webkit-animation: animation-definition 1s ease-out;
-o-animation: animation-definition 1s ease-out;
}
@keyframes animation-definition {
from{
transform: scale(0.1);
opacity: 1;
}
to{
transform: scale(2); /*因為漣漪的大小為標簽的最長邊泥耀，為了保證點擊標簽邊緣時，漣漪也能覆蓋整個標簽蛔添，scale值最小應為2*/
opacity: 0;
}
}
</style>
</head>
<body>
<b>不需要加p標簽</b>
<br/>
<br/>
<button class="waves" style="width: 125px;height: 40px;background-color: #27C4B4;color: white">
Button1
</button>
<button class="waves" style="width: 125px;height: 40px;background-color: #EE6E73;color: white">
Button2
</button>
<br/><br/>
<b>需要加p標簽<b>
<br/>
<br/>
<div class="waves" style="width: 125px;height: 40px;background-color: #311B92;color: white">
<p style="line-height:40px; display:inline;">Div</p>
</div>
<a href="#" class="waves" style="width: 125px;height: 40px;background-color: #FF9800;color: white">
<p style="line-height:40px; display:inline;">A</p>
</a>
<span class="waves" style="width: 125px;height: 40px;background-color: #607D8B;color: white">
<p style="line-height:40px; display:inline;">Span</p>
</span>
</body>
</html>
后續(xù)內容：
- 目前只有button使用該樣式最方便（一開始也是只為button而寫的）痰催，至于div、a迎瞧、span等標簽顯示文字還需要嵌套一個p標簽
- 為了方便重復使用夸溶，還需要將css、js提取出來
更新
分離html凶硅、css缝裁、js代碼。查看更新內容足绅，可移步Maves實例代碼
更新捷绑，2016.10.6
本次更新使用了類以及單例模式重構代碼，更新內容如下
只附上js文件更新部分氢妈，其他可移步Toast示例代碼：
$(document).ready(function(){
$(".mmd-waves").mousedown(function(e) {
var m = new MavesClass();
m.showWaves(this,e);
});
});
//漣漪類粹污，使其相對獨立
function MavesClass(){
if(MavesClass.instance !== undefined){
return MavesClass.instance;
}
MavesClass.instance = this;
this.showWaves = function(_this,e){
box = $(_this);
wavesDiv = box.find("div");
//第一次沒有漣漪div，動態(tài)生成
if(wavesDiv[0] == null){
var div = "<div class='mmd-waves-effect'></div>";
box.append(div);
wavesDiv = box.find("div");
}
//設置按鈕樣式為’waves-effect‘即去掉動畫樣式’waves-effect-animation‘
wavesDiv[0].className = 'mmd-waves-effect';
//計算漣漪坐標（折算成左上角坐標而非中心點）允懂，漣漪大胁蘖（取外標簽最長邊）
var wH = box.width() > box.height() ? box.width() : box.height();
var iX = e.pageX - box.offset().left;
var iY = e.pageY - box.offset().top;
var nX = iX - wH/2;
var nY = iY - wH/2;
//設置漣漪div樣式，準備播放動畫
wavesDiv.css({
width: wH,
height: wH,
left: nX,
top: nY
}).addClass("mmd-waves-effect-animation");//播放動畫
}
}
