效果: 思路: 利用setInerval()计时器,进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。 代码: 复制代码 代码如下: <BR> #div1<BR> {<BR> width: 100px;<BR> height: 100px;<BR> background: #0000FF;<BR> position: absolute;<BR> left: 800px;<BR> top: 100px;<BR> }<BR> #div200<BR> {<BR> width: 1px;<BR> height: 400px;<BR> background: #FF0000;<BR> position: absolute;<BR> left: 200px;<BR> }<BR> #div500<BR> {<BR> width: 1px;<BR> height: 400px;<BR> background: #FF0000;<BR> position: absolute;<BR> left: 500px;<BR> }<BR> <BR> function move(end) {<BR> var oDiv = document.getElementById('div1');<BR> var timer = null;<BR> timer = setInterval(function () {<BR> var speed = (end - oDiv.offsetLeft) / 5; //根据终点和offsetLeft取出运动的速度<BR> speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整,小数位变为整位,<BR> // if (oDiv.offsetLeft <= end) {<BR> // clearInterval(timer);<BR> // }<BR> // else {<BR> // oDiv.style.left = oDiv.offsetLeft + speed + 'px';<BR> // }<BR> if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的时候最后会出现小的缝隙,或者说没有完全的到达指定地点,所以要小于它的速度<BR> clearInterval(timer); //当距离小于速度时,让计时器停止<BR> oDiv.style.left = end + 'px'; //在停止后填充缝隙。<BR> }<BR> else {<BR> oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //移动DIV<BR> }<BR> }, 30)<BR> }<BR> 200 500