<script type="text/javascript">
window.onload = function(first_argument) {
var obj = document.getElementsByTagName("li");
var width = obj[0].style.width;
for(var i=0; i<obj.length; i++){
obj[i].timer = null;
obj[i].onmouseover = function(){
startMove(this, 500, true);
}
obj[i].onmouseout = function(){
startMove(this, 100, false);
}
}
}
//var timer = null;
function startMove(obj, targes, status){
clearInterval(obj.timer);
var speed = (targes - obj.offsetWidth)/10 ;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
console.log(speed);
obj.timer = setInterval(function(){
if(status){
if(obj.offsetWidth > targes){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth + speed + "px";
}
}else{
if(obj.offsetWidth < 100){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth + speed + "px";
}
}
}, 30);
}
</script>
