手动封装运动框架

1.获取非行间样式
  obj---DOM对象，attr----要获取的样式属性

function getAttr(dom,attr){  
            var style;
            //IE8以下    
            if(dom.currentStyle){            //当有这个属性的时候currentStyle
                style = dom.currentStyle[attr]; //兼容IE 我测试的是ie5+
            }
            else{
                //主流浏览器
                style = getComputedStyle(dom,false)[attr]; 
            }
            return style;
        }

2.封装运动框架 

function move(dom,obj,time,callback){
            var attr,target,flag;
            clearInterval(dom.timer)
            dom.timer = setInterval(function(){
                flag = true;
                for(attr in obj){
                    
                    target = obj[attr]
                    if(attr == 'opacity'){
                        var origin = parseInt(getAttr(dom,attr)*100)
                    }else{
                        var origin = parseInt(getAttr(dom,attr))
                    }
                    console.log(origin)
                    var speed = (target - origin) / 10;
                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
                    
                    if(attr == 'opacity'){
                        dom.style[attr] = (origin + speed) / 100;
                    }else{
                        dom.style[attr] = origin + speed + 'px';
                    }
                    
                    if(origin + speed != target){
                        flag = false
                    }
                    
                }
                if(flag){
                    clearInterval(dom.timer)
                    if(callback){
                        callback()
                    }
                }
                
            },time)
        }
        box.timer = null; 

 3.调用使用

move(box,{ 
            left:500,
            top:200,
            opacity:30
        },200)

//box：使用的id名