实现点击时按钮背景为动态扩散的波纹效果。
效果图如下：
页面代码：
<!DOCTYPE html>
<html>
<head>
<title>按钮点击特效</title>
</head>
<style>
input[type=button]{
outline: none;
height: 60px;
line-height: 60px;
width: 200px;
background-color: white;
border: 1px solid skyblue;
color: blue;
}
input[type=button]:focus{
background-image: url(bg.png);
background-repeat: no-repeat;
background-size: 0% 0%;
}
</style>
<body>
<input type="button" value="点我">
<script>
var buttons = document.getElementsByTagName("input");
for(var i=0;i<buttons.length;i++){
console.log(buttons[i]);
if(buttons[i].type == "button"){
buttons[i].addEventListener("click",function(e){
var ev = e || window.event;//获取点击事件
var parent = ev.target;//获取按钮的dom节点
var count = 1; // 计时
var sI = setInterval(function(){
// 循环结束，清除背景
if(count > 100){
parent.style["background-image"] = "";
parent.style["background-position"] = "";
parent.style["background-size"] = "";
clearInterval(sI);
return;
}
// 设置背景的大小变化
parent.style["background-size"] = 2*count + "%";
// 设置背景位置根据背景大小改变
parent.style["background-position"] = (ev.clientX - parent.offsetLeft - count*parent.offsetWidth/100)+
"px "+
(ev.clientY - parent.offsetTop - count*parent.offsetWidth/100)+
"px";
count += 1;
},10) // 设置间隔时间为10ms
})
}
}
</script>
</body>
</html>
背景素材：
