move.js运行插件

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #div1{ width: 200px; height: 200px; background: red; position: absolute; left: 0; top: 20px;}
    </style>
</head>
<body>
    
    <div id="div1"></div>

    <script>
    function getStyle(obj, name){
    return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj, false)[name];
};

function move(obj, json, options){

    options=options||{};
    options.type=options.type||'buffer';
    options.time=options.time||700;
    
    var count=parseInt(options.time/30);
    var n=0;
    
    var start={};
    var dis={};
    
    for(var name in json){
        if(name=='opacity'){
            start[name]=Math.round(parseFloat(getStyle(obj, name))*100);
        }else{
            start[name]=parseInt(getStyle(obj, name));
        };
        dis[name]=json[name]-start[name];
    };
    
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        n++;
        
        for(var name in json){
            switch(options.type){
                case 'linear':        //匀速
                    var cur=start[name]+dis[name]*n/count;
                    break;
                case 'buffer':        //缓冲
                    var a=1-n/count;
                    var cur=start[name]+dis[name]*(1-a*a*a);
                    break;
                case 'ease-in':        //加速
                    var a=n/count;
                    var cur=start[name]+dis[name]*(a*a*a);
                    break;
            };
            
            if(name=='opacity'){
                obj.style.filter='alpha(opacity:'+cur+')';
                obj.style.opacity=cur/100;
            }else{
                obj.style[name]=cur+'px';
            };
        };
        
        if(n==count){
            clearInterval(obj.timer);
            options.end && options.end();
        };
    }, 30);
}

        window.onload = function(){
            var oDiv = document.getElementById('div1');

            oDiv.onclick = function(){
                move(this, {left: 500, top: 300, opacity:10}, {time:1500, type: 'buffer', end: function(){
                    alert(1);
                }});
            };
        };
    </script>
</body>
</html>
猜你喜欢
