写在前面：
这是一篇菜鸟的学习笔记，记录效果实现过程，没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。
这个涟漪效果是在这篇博客的指导下完成的。
编写过程记录：
写个涟漪效果真的折腾了好几天。唉，毕竟没有系统学过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，动态生成
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>
后续内容：
- 目前只有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，动态生成
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");//播放动画
}
}
网友评论