震動效果

概念

利用setInterval快速地左右搖晃,達成震動的效果

範例

button#wiggle Shake it
#wiggle
 position: relative
//讓他一開始不要搖
var wiggleTime = 31;
var wiggle=document.querySelector("#wiggle");

window.setInterval(
 function(){
 if(wiggleTime<=31){
 wiggleTime+=1;
 //console.log(wiggleTime);
 
 if(wiggleTime%2==0){
 wiggle.style.left="-5px";
 }else{
 wiggle.style.left="5px";
 } 
 } 
 }
 ,60);

wiggle.addEventListener("click",
 function(){
 wiggleTime=0;
}
);
Display

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *