各种封装----move框架

标签：

运动框架

html <div id="div1"></div>

js:

window.onload=function(){

　　var oDiv=document.getElementById(‘div1‘);

　　　oDiv.onclick=function(){

　　　　move(oDiv,{left:300});　　

};

};

使用：move()

function move(obj, json, options)
{
    options=options || {};
    var type=options.type || ‘linear‘;
    var time=options.time || 2000;

    var start={};
    var dis={};
    for (var name in json)
    {
        start[name]=parseFloat(getStyle(obj, name));
        dis[name]=json[name]-start[name];
    }

    var count=Math.floor(time/30);
    var n=0;
    
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        n++;
        
        // 改变样式
        for (var name in json)
        {
            switch (type)
            {
                case ‘linear‘:
                    var cur=start[name]+dis[name]*n/count;
                    break;
                    
                case ‘ease-in‘:
                    var a=n/count;
                    var cur=start[name]+dis[name]*a*a*a;
                    break;
                    
                case ‘ease-out‘:
                    var a=1-n/count;
                    var cur=start[name]+dis[name]*(1-a*a*a);
                    break;
            }
            
            
            if (name == ‘opacity‘)
            {
                obj.style[name]=cur;
            }
            else
            {
                obj.style[name]=cur+‘px‘;
            }
        }
        
        if (n == count)
        {
            clearInterval(obj.timer);
            options.fn && options.fn();
        }
    }, 30);
}
function getStyle(obj, sName)
{
    return (obj.currentStyle || getComputedStyle(obj, false))[sName];
}

各种封装----move框架

标签：

原文地址：http://www.cnblogs.com/yuanyiying/p/4899047.html