如何实现图片抖动效果

<script src="doMove.js"></script>

<script>

    window.onload = function(){

        var img1 = document.getElementById('img1');

        img1.onclick = function(){

            // 先获得img1的原来left值，在此基础上进行抖动;parseInt()是把300px的单位去掉只留数字

            var pos = parseInt(getStyle(img1,'left'));

            var arr = [];//20，-20,18，-18,16，-16，...存放抖动的频率

            var timer = null;//开启定时器

            var num = 0;//一般只要有数组，那么必定有数字跟着变化；数组的第0个，第1个...

            for(var i =20;i>0;i-=2){//左右抖动的幅度第一次为20px，然后减2

                arr.push(i,-i);

            }

            arr.push(0);

            // alert(arr);//测试一下

            // 有抖动的频率之后，要开启定时器让它进行抖动

            clearInterval(timer);//开启定时器之前要先把定时器关闭，防止连续多次点击

            timer = setInterval(function(){

                img1.style.left = pos + arr[num] + 'px';//原来的位置pos,加上数组中每一个数字

                num++;

                if(num === arr.length){//如果数字等于数组的长度（就是全部抖完了），关闭定时器

                    clearInterval(timer);

                }

            },50);

        }

    }

</script>