JS封装 多物体多值链式运动方法

html部分： 

 <div class="top"></div>
    <div class="bottom"></div>

css部分：

      div{
            width: 100px;
            height: 100px;
            background:red;
            position: absolute;
            left: 0px;
            opacity: 1;
        }
        .top{
            top: 100px;
        }
        .bottom{
            top:300px;
        }

js部分：效果是缓冲（由快到慢）

 var divArray  = document.getElementsByTagName('div');
        var timer = null;
        var targetObj={
            width:400,
            height:400,
            opacity:30,
            left:300,
            top:200
        }
       
        divArray[0].onclick =function(){         
            startMove(this, targetObj, function(){
                startMove(divArray[1], targetObj);
            })
        }
        //封装获得非行间样式的属性
        function getStyle (obj, attr){//求得某对象中某属性的值
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else {
                return window.getComputedStyle(obj, false)[attr];
            }
        }
        //封装把某对象的属性渐进为目标属性的方法
        function startMove(obj, json, callback){
            clearInterval(obj, timer);
            var isSpeed,sur
            obj.timer=setInterval(function(){
                var bStop = true;
                for(var attr in json){  //遍历所有属性              
                    if(attr == 'opacity'){                 
                        sur = parseFloat(getStyle(obj, attr)) * 100;//得到当前的透明度并*100
                    }else{
                        sur = parseInt(getStyle(obj, attr));
                    }
                    isSpeed = (json[attr] - sur) / 7;
                    isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
                    if(attr == 'opacity'){
                        obj.style.opacity = (sur + isSpeed) / 100;//设置新的透明度
                    }else {
                        obj.style[attr] = sur + isSpeed + 'px';
                    }
                    if(Math.floor(Math.abs(json[attr]-sur))!=0){
                        bStop = false;                        
                    }                 
                }
                if(bStop){
                        clearInterval(obj.timer);
                        typeof callback == 'function' ? callback() : '';
                    }
            },30)
        }

JS中注释：

1.isSpeed的处理：

  isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);

需要处理的原因是：sur是取整的，当当前值加一个小数时，如299+0.14还等299..再加还是小数还等299....会一直等于299不能得到准确结果。

2.opacity的处理：

  if(attr == 'opacity'){  sur =  (getStyle(obj, attr)) * 100 }

当属性是opacity时，值可以是小数，但是isSpeed是取整的，如：target=0.5，当前opacity为0.3时，isSpeed取值为1，opacity=1.3自动取1；下次isSpeed取值为-1，opacity=0....此后opacity会在0，1,0,1,0，1循环。所以要*100避免小数带来的黑洞。