<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>缓冲运动</title> <style type="text/css"> #divMove { width: 100px; height: 100px; position: absolute; top: 200px; left:0px; background: red; } </style> </head> <script type="text/javascript"> window.onload = function() { //获取对象 var oDivMove = document.getElementById("divMove"); var oBtnMove = document.getElementById("btnMove"); oBtnMove.onclick = function() { oDivMove.offsetLeft==0?startMove(oDivMove, 600):startMove(oDivMove, 0);//如果left是0就往右走,否则就往左走 }; }; var oTimer = null; //定时器 function startMove(obj, iTarget) { clearInterval(oTimer); //关闭定时器 oTimer = setInterval(function() { var iSpeed = (iTarget - obj.offsetLeft) / 10; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整数,防止前后波动 if (obj.offsetLeft == iTarget) {//判断是否到达终点 clearInterval(oTimer); //关闭定时器 } else { obj.style.left = obj.offsetLeft + iSpeed + "px";//层运动 document.getElementById("divMove").innerHTML = "速度:"+iSpeed+'</br>'+'距离:'+obj.offsetLeft + "px"; }; }, 30); } </script> <body> <div id="divMove"> </div> <input type="button" id="btnMove" value="开始运动" /> </body> </html>
时间: 2024-11-05 13:33:32