實現點擊時按鈕背景爲動態擴散的波紋效果。
效果圖如下：
頁面代碼：
<!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>
背景素材：
