原生js实现多组图片抖动效果的问题

昨天把多组图片抖动效果实现了，但是有一个问题就是关于快速多次移动到图片上的时候会出现移动事件结束之后图片不在原来位置。就像下图所示：

 这个问题的关键是：获取的位置都是移动事件之后重新刷新的位置，所以又去加抖动频率，重新又实现一次抖动效果，以便于会有图片最后出现上图的问题了。解决这个关键就是要做个判断，每次实现抖动效果前获取到的位置值只是是初始化的那个值，所以代码就要这样写：

<script>

    //兼容不同浏览器获取行间样式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

    window.onload=function(){

        var oImg=document.getElementsByTagName("img");
        for(var i= 0;i<oImg.length;i++){
            oImg[i].style.left=i*200+"px";
            oImg[i].flag=true;
            oImg[i].onmouseover=fn;
        }
            function fn(){
                var _this=this;
                var flag=_this.flag;
                if(flag){
                    this.flag=false;
                    shake(_this,'left',flag,function(){//这里的回调函数实现的效果就是上下抖动
                        shake(_this,'top',flag,function(){//注意：若没有任何声明的情况下，回调函数里不能直接用this,所以 _this=this不能少
                            _this.flag=true;
                        });
                    });


                }

            }
        //抖动效果的代码封装需要的参数也就是对象，方向，回调函数
        function shake(obj,attr,flag,endFn){

            var pos=parseFloat(getStyle(obj,attr));
            var temp=0;
            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(obj.timer);
            obj.timer=setInterval(function(){
                //让图片的left跟随数组里的值变化就会实现左右移动效果
                obj.style[attr]=pos+arr[num]+"px";
                num++;
                if(num===arr.length){
                    clearInterval(obj.timer);
                    endFn && endFn();
                }
            },50)
        }
    };

</script>

好了，这样写，这个问题就解决了，你们不妨试试！今天就到这里！