animation js控制 缓动效果 



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>缓动效果</title>
</head>
<body>
<div id="btn" style='position:absolute;'>按钮</div>
<script type="text/javascript">
var effect = {
    insertBtn: document.getElementById("btn"),
};
effect.insertBtn.onclick = function(){
    number(effect.insertBtn,18,100);
};
var number = function(node,minnum,maxnum){
    var left = minnum;
    var step = function(){ 
        left+=1;
        node.style.left = left + "px";
        if(left < maxnum){
            setTimeout(step,10);
        }else{
            setTimeout(stepReverse,10); 
        }
    };
     var stepReverse = function(){
         left-=1;
         node.style.left = left + "px";
         if(left > minnum){
             setTimeout(stepReverse,10);
         }else{
         // node.style.display = "none";
         }
     };
     setTimeout(step,10);
 };
 </script>
</body>
</html>


 




 




<div id="box" style="position:absolute;">Hello!</div>
<script>
var timers = {
    timerID: 0,
    timers: [],
    delay:100,
    maxnum:200,
    minnum:0,
    start: function(){

        // console.log(this.timerID)
        if ( this.timerID ){
            return;
        }
        (function(){
        for ( var i = 0; i < timers.timers.length; i++ ){
            if ( timers.timers[i]() === false ) {
                timers.timers.splice(i, 1);
                i--;
            }
        }
        timers.timerID = setTimeout( arguments.callee, timers.delay );

        })();
    },
    stop: function(){
        clearTimeout( this.timerID );
        this.timerID = 0;
    },
    add: function(fn){
        this.timers.push( fn );
        this.start();
    }
};
var box = document.getElementById("box"), left = 0, top = 20;
timers.add(function(){
    box.style.left = left + "px";
    if ( ++left > timers.maxnum ){
        return false;
    }
     var step = function(){      
            left+=1;
            box.style.left = left + "px";
            if(left < timers.maxnum){
                setTimeout(step,10);
                console.log(11)
            }else{
                setTimeout(stepReverse,10);  
                console.log(22) 
            }
        };
       
        var stepReverse = function(){
            left-=1;
            box.style.left = left + "px";
            if(left > timers.minnum){
                console.log(4444) 
                setTimeout(stepReverse,10);
            }else{
                 setTimeout(step,10);
                // box.style.display = "none";
            }
            console.log(3333) 
        };
        setTimeout(step,10);   
});
// timers.add(function(){
//     box.style.top = top + "px";
//     top += 2;
//     if ( top > 180 ){
//         return false;
//     }
// });
</script>




 







            

            
posted @ 
2016-03-18 17:50 
徐学进 
阅读(618) 
评论(0) 
编辑 
收藏 
举报