<!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="1px;height:300px;background:black;top:0px;left:300px;position:absolute;"></div> </body> </html>