缓冲运动 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 0px;
                top: 30px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                
                var oBtn=document.getElementById("btn");
                var oDiv=document.getElementById("div1");
                var iTimer=null;
                
                
                oBtn.onclick=function(){
                    clearInterval(iTimer);
                    var iSpeed=0;
                    
                    iTimer=setInterval(function(){
                        
                        iSpeed = (500 - oDiv.offsetLeft)/8;
                        
                        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                        
                        if(oDiv.offsetLeft == 500){
                            clearInterval(iTimer)
                        }else{
                            oDiv.style.left=oDiv.offsetLeft + iSpeed + "px";
                        }
                    },30);
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="动起来" />
        <div id="div1"></div>
    </body>
    
</html>

 

posted @ 2019-01-02 16:59  webxy  阅读(71)  评论(0)    收藏  举报