码迷,mamicode.com
首页 > Web开发 > 详细

move.js运行插件

时间:2019-04-13 11:07:48      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:window   obj   art   getc   body   title   UNC   oct   ted   

代码如下:

<!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>

 

move.js运行插件

标签:window   obj   art   getc   body   title   UNC   oct   ted   

原文地址:https://www.cnblogs.com/wm218/p/10699910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!