js 弹性运动

浏览数：22 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>弹性运动</title>
    <style>
        #div1
        {
            width:100px;
            height:100px;
            background:red;
            position:absolute;
        }
    </style>
    
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            
            var oDiv = document.getElementById("div1");
            
            oBtn.onclick = function(){
               move2(oDiv,300);
            }
        
        }
        
        
        var timer = null;
        var speed = 0;
        
        function move(){
            
            clearInterval(timer);
            timer = setInterval(function(){
                var oDiv = document.getElementById("div1");
                
                speed+=(300-oDiv.offsetLeft)/5;
                
                speed*= 0.7;
                
                oDiv.style.left = oDiv.offsetLeft + speed +‘px‘;
                
                
            },30);
        }
        
        var iSpeed = 0;
        function move2(obj,target)
        {
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                
                iSpeed +=(target-obj.offsetLeft)/5;
                iSpeed *=0.7;
                
                if(Math.abs(iSpeed)<1 && Math.abs(target-obj.offsetLeft)<1)
                {
                    clearInterval(obj.timer);
                }
                else
                {
                    obj.style.left = obj.offsetLeft + iSpeed +‘px‘;
                }
            },30);
        }
    </script>
</head>
<body>
   <input type="button" id="btn" value="运动" />
   <div id="div1">
    </div>
    
    <div style="width:1px;height:300px;background:black;top:0px;left:300px;position:absolute;"></div>

</body>
</html>