js点击按钮实现水波纹效果代码（CSS3和Canves）
前端之家收集整理的这篇文章主要介绍了
js点击按钮实现水波纹效果代码（CSS3和Canves），
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题)
先看看效果吧，如下图（录制gif软件有点渣，看起来卡卡的...）
这种效果可以由元素内嵌套canves实现，也可以由css3实现。
Canves实现
网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下
HTML代码：
css代码：
js代码：
init();
CSS3实现
接下来就是纯手打的代码了...觉得还是css3实现的方便些，可能是css写习惯了...
html代码
css代码
<div class="jb51code">
<pre class="brush:css;">
.waves{
position:relative;
cursor:pointer;
display:inline-block;
overflow:hidden;
text-align: center;
-webkit-tap-highlight-color:transparent;
z-index:1;
}
.waves .waves-animation{
position:absolute;
border-radius:50%;
width:25px;
height:25px;
opacity:0;
background:rgba(255,255,0.3);
transition:all 0.7s ease-out;
transition-property:transform,opacity,-webkit-transform;
-webkit-transform:scale(0);
transform:scale(0);
pointer-events:none
}
.ts-btn{
width: 200px;
height: 56px;
line-height: 56px;
background: #f57035;
color: #fff;
border-radius: 5px;
}
js代码
<div class="jb51code">
<pre class="brush:js;">
document.addEventListener('DOMContentLoaded',function(){
var duration = 750;
// 样式string拼凑
var forStyle = function(position){
var cssStr = '';
for( var key in position){
if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
};
return cssStr;
}
// 获取鼠标点击位置
var forRect = function(target){
var position = {
top:0,left:0
},ele = document.documentElement;
'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
return {
top: position.top + window.pageYOffset - ele.clientTop,left: position.left + window.pageXOffset - ele.clientLeft
}
}
var show = function(event){
var pDiv = event.target,cDiv = document.createElement('div');
pDiv.appendChild(cDiv);
var rectObj = forRect(pDiv),_height = event.pageY - rectObj.top,_left = event.pageX - rectObj.left,_scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
var position = {
top: _height+'px',left: _left+'px'
};
cDiv.className = cDiv.className + " waves-animation",cDiv.setAttribute("style",forStyle(position)),position["-webkit-transform"] = _scale,position["-moz-transform"] = _scale,position["-ms-transform"] = _scale,position["-o-transform"] = _scale,position.transform = _scale,position.opacity = "1",position["-webkit-transition-duration"] = duration + "ms",position["-moz-transition-duration"] = duration + "ms",position["-o-transition-duration"] = duration + "ms",position["transition-duration"] = duration + "ms",position["-webkit-transition-timing-function"] = "cubic-bezier(0.250,0.460,0.450,0.940)",position["-moz-transition-timing-function"] = "cubic-bezier(0.250,position["-o-transition-timing-function"] = "cubic-bezier(0.250,position["transition-timing-function"] = "cubic-bezier(0.250,forStyle(position));
var finishStyle = {
opacity: 0,"-webkit-transition-duration": duration + "ms",// 过渡时间
"-moz-transition-duration": duration + "ms","-o-transition-duration": duration + "ms","transition-duration": duration + "ms","-webkit-transform" : _scale,"-moz-transform" : _scale,"-ms-transform" : _scale,"-o-transform" : _scale,top: _height + "px",left: _left + "px",};
setTimeout(function(){
cDiv.setAttribute("style",forStyle(finishStyle));
setTimeout(function(){
pDiv.removeChild(cDiv);
},duration);
},100)
}
document.querySelector('.waves').addEventListener('click',function(e){
show(e);
},!1);
},!1);
