<style type="text/css">

*{margin:0;padding:0;}

ul,li{

list-style:none;

}

ul li{

width:200px;

height:100px;

background:yellow;

margin-bottom:20px;

}

</style>

<script type="text/javascript">

window.onload=function(){

var lis=document.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

//lis[i].timer=null;

lis[i].onmouseover=function(){

startMove(this,400);

}

lis[i].onmouseout=function(){

startMove(this,200);

}

}

}

function startMove(obj,target){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var speed=(target-obj.offsetWidth)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth==target){

clearInterval(timer);

}else{

obj.style.Width=obj.offsetWidth+speed+"px";

}

},30)

}

</script>

</head>