效果： 思路： 利用setInterval计时器进行运动，offsetWidth实现宽度的变动，在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动。 代码： 复制代码 代码如下: <br> div<br> {<br> width: 100px;<br> height: 50px;<br> background: #0000FF;<br> margin: 10px;<br> }<br> <br> window.onload = function () {<br> var oDiv = document.getElementsByTagName('div');<br> for (var i = 0; i < oDiv.length; i ) {<BR> oDiv[i].timer = null; //给买个DIV做个标记，用以关闭相应DIV的定时器<BR> oDiv[i].onmouseover = function () {<BR> move(this, 400); //给定时器输出参数<BR> }<BR> oDiv[i].onmouseout = function () {<BR> move(this, 100);<BR> }<BR> }<BR> };<BR> function move(div, end) {<BR> clearInterval(div.timer);<BR> div.timer = setInterval(function () {<BR> var speed = (end - div.offsetWidth) / 5; //（终点-要走的宽度）/缩放系数=DIV移动的速度<BR> speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //小数取整，也就是进位取整<br> if (div.offsetWidth == end) { //当到达终点时关闭计时器<br> clearInterval(div.timer);<br> }<br> else {<br> div.style.width = div.offsetWidth speed 'px'; //移动DIV的宽度<br> }<br> }, 30)<br> }<br>
