2-5 js基础-简易运动框架

'use strict';
function getStyle(obj,sName){
    return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
//function move(obj,json,time,type,fn)
function move(obj,json,options){
    options=options||{};
    options.time=options.time||700;
    options.type=options.type||'linear';
    var start={};
    var dis={};
    for(var name in json){
        start[name]=parseInt(getStyle(obj,name));
        if(isNaN(start[name])){
            //加默认值
            switch(name){
                case 'left':
                start[name]=obj.offsetLeft;
                break;
                case'top':
                start[name]=obj.offsetTop;
                break;
                case'width':
                start[name]=obj.offsetWidth;
                break;
                case'Height':
                start[name]=obj.offsetHeight;
                break
                case'opacity':
                start[name]=1;
                break;
                case'border':
                start[name]=0;
            }
        }
        dis[name]=json[name]-start[name];
    }
    var count=Math.floor(options.time/30);
    var n=0;
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        n++;
        var ocr='';
        for(var name in json){
            
            switch(options.type){
                case'linear':
                var a=n/count;
                ocr=start[name]+a*dis[name];
                break;
                case'ease-in':
                var a=n/count;
                ocr=start[name]+Math.pow(a,3)*dis[name];
                break;
                case'ease-out':
                var a=(1-n/count);
                ocr=start[name]+(1-Math.pow(a,3))*dis[name];
                break;
            }
            if(name=='opacity'){
                obj.style[name]=ocr;
                obj.style[name]='filter:alpha(opacity='+ocr*100+')';
            }else{
            obj.style[name]=ocr+'px';
            }
        }
        if(n==count){
            clearInterval(obj.timer);
            options.end&&options.end();
        }
    },30);
}