今天來寫一個關於圖片抖動的效果，需求是：點擊圖片，讓其抖動幾下停止（類似於蘋果手機填錯密碼之后會抖一下的效果），其實想要實現這個效果，原理就是，點擊之后，讓其左移動下然后右移動一下（每移動一下減幾像素知道減到0），然后將其放入定時器內，讓其慢慢自動停下來。來看代碼布局：
<style> #img{position:absolute;left:30px;} </style> <body> <!--需求：點擊圖片，圖片會抖動幾下--> <img id="img" width="180" src="img/pic4.jpg"/> </body>
接下來就是js的實現：
<script>
//兼容不同瀏覽器獲取行間樣式
function getStyle ( obj, attr ) {
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
window.onload=function(){
//第一步先追加多個div
var oImg=document.getElementById("img");
//添加點擊事件
oImg.onclick=function(){
//先獲取圖片自身所在的left值
var pos=parseFloat(getStyle(oImg,"left"));
var arr=[];
var num=0;
var timer=null;
//抖動頻率de數組，一正一負[20,-20,18,-18...]
for(var i=20;i>0;i-=2){
arr.push(i,-i)
}
arr.push(0);
//啟用定時器前先關閉定時器
clearInterval(timer);
timer=setInterval(function(){
//讓圖片的left跟隨數組里的值變化就會實現左右移動效果
oImg.style.left=pos+arr[num]+"px";
num++;
if(num===arr.length){
clearInterval(timer);
}
},50)
};
};
</script>
這樣就實現了點擊一下圖片，圖片將會抖動幾下慢慢停下了。抖動原理其實就是元素的自動左右移動，所以一定要用到setInterval。可以試一下哦！
好了，今天就這樣了！