<style>
div {width:100px; height:50px; background:green; margin:20px; }
</style>
<script>
window.onload=function()
{
//申明变量adiv并让它获取到所有DIV的对象;
var aDiv=document.getElementsByTagName('div');
//做一个循环(申明一个变量i=0;循环的次数要小于变量adiv的最大数;循环一次增加1)
for(var i=0; i<aDiv.length; i=i+1)
{
//给没个DIV都设置一个定时器并赋值为空;
aDiv[i].timer=null;
//给每个DIV都创建一个鼠标移入的事件函数
aDiv[i].onmouseover=function()
{
move(this,400) //函数move(当前元素,到400像素的位置;)
}
aDiv[i].onmouseout=function()
{
move(this,100) //函数move(当前元素,到400像素的位置;)
}
}
}
function move(obj,iTarget) //设置函数move并传递2个参数(obj,iTarget);
{
clearInterval(obj.timer); //清楚每个当前元素的定时器
obj.timer=setInterval(function(){ //为每个定时器都创建一个函数并且每30毫秒运行一次;
var speed=(iTarget-obj.offsetWidth)/10
speed=speed>0?Math.ceil(speed):Math.floor(speed);//类似if(speed>0){speed=math.ceil(speed)}else{speed=math.floor(speed)} if(obj.offsetWidth==iTarget)
if(obj.offsetWidth==iTarget) //假如当前元素的宽带等于目标距离
{
clearInterval(obj.timer) //清楚当前元素的定时器
}
else
{
obj.style.width=obj.offsetWidth+speed+'px';//当前元素的宽带=前端元素宽带+速度+px;
}
},30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
