js运动例子1 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
*{margin:0;padding:0;list-style:none;}
#ul1{width:516px;height:516px; margin:10px auto; position:relative;}
#ul1 li{float:left;width:150px; height:150px; border:1px solid #000; background:#ccc; margin:10px;}
</style>
<script src="move.js"></script>
<script>


window.onload = function(){
    
    var oBtn = document.getElementById("btn1");
    var oUl  = document.getElementById("ul1");
    var aLi  = oUl.children;
    
    
    //布局转换
    var aPos = [];
    for(var i = 0; i < aLi.length; i++){
        aPos[i] = {left:aLi[i].offsetLeft,top:aLi[i].offsetTop};
        
        aLi[i].style.left = aPos[i].left + "px";
        aLi[i].style.top  = aPos[i].top  + "px"; 
    }
    
    for(var i = 0; i < aLi.length; i++){
        
        
        aLi[i].style.position = "absolute";
        aLi[i].style.margin  = "0"; 
    }
    
    
    var timer = null;
    oBtn.onclick = function(){

        var i = 0;
        clearInterval(timer);
        timer = setInterval(function(){
            
            (function(index){
                move(aLi[i],
                     {width:20,height:20,left:200,top:200,opacity:0},
                     {complete:function(){
                         //alert(index);
                         if(index == aLi.length - 1){
                             //alert("运动完成");
                             
                             i = aLi.length - 1;
                             clearInterval(timer);
                             timer = setInterval(function(){

                                move(aLi[i],
                                     {
                                      width:150,height:150,
                                      left:aPos[i].left,top:aPos[i].top,
                                      opacity:1
                                     }
                                );
                                
                                i--;    
                                
                                if(i == -1){
                                    clearInterval(timer);
                                } 
                                 
                             },100);
                         }
                         
                     }
                });
            
            })(i);
            
            i++;
            
            if(i == aLi.length){
                clearInterval(timer);    
            }
            
        },100);
    };
    
    
    
        
};

</script>
</head>

<body>
<input id="btn1" type="button" value="收起来"/>
<ul id="ul1">

    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>
//版权 北京智能社©, 保留所有权利

function getStyle(obj,name){
    return (obj.currentStyle || getComputedStyle(obj,false))[name];
}

function move(obj,json,options){
    
    options = options || {};
    options.duration = options.duration || 700;
    options.easing = options.easing || "ease-out";
    
    
    var start = {};
    var dis = {};
    
    for(var name in json){
            
        start[name] = parseFloat(getStyle(obj,name));
        
        dis[name] = json[name] - start[name];
    }
    
    var count = Math.round(options.duration/30);
    
    
    var n = 0;
    
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
            
        n++;
        
        for(var name in json){
            
            var cur = start[name] + dis[name]/count*n;
            
            
            switch(options.easing){
                case "linear":
                    var a = n/count;
                    var cur = start[name] + dis[name]*a;
                    
                    break;
                case "ease-in":
                    var a = n/count;
                    var cur = start[name] + dis[name]*Math.pow(a,3);
                
                    break;
                case "ease-out":
                    var a = 1 - n/count;
                    var cur = start[name] + dis[name]*(1 - Math.pow(a,3));
                    break;
            }
            
            
            if(name == "opacity"){
                obj.style.opacity = cur;
                obj.style.filter = "alpha(opacity:"+cur*100+")";
            } else {
                obj.style[name] = cur + "px";
            }
        }
        
        
        
        if(n == count){
            clearInterval(obj.timer);
            options.complete && options.complete();
        }
        
    },30);
    
    
    
    
    
    
        
}

 

posted @ 2015-03-09 17:04  高尔础础  阅读(176)  评论(0)    收藏  举报