今天来写一个关于图片抖动的效果，需求是：点击图片，让其抖动几下停止（类似于苹果手机填错密码之后会抖一下的效果），其实想要实现这个效果，原理就是，点击之后，让其左移动下然后右移动一下（每移动一下减几像素知道减到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。可以试一下哦！
好了，今天就这样了！
原生js实现图片抖动效果
原文地址：http://www.cnblogs.com/web001/p/8099061.html