怎么没有动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>练习</title>
<style type="text/css" media="screen">
*{padding:0;margin:0;}
ul{list-style: none;margin-left: 20px;}
li{float: left;}
a{text-decoration:none;height:40px;width:100px;background-color: #ccc;display:block;text-align: center;line-height: 40px;margin-bottom: 15px;}
.on,a:hover{background-color: #ecc;color: #fff;
}
</style>
<script type="text/javascript">
window.onload=function(){
//var oul=document.getElementsByTagName('ul')[0];
var aA=document.getElementsByTagName('a');
for(var i=0;i<aA.lenth;i++){
aA[i].onmouseover=function(){
var This=this;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+'px';
if(This.offsetWidth>160){
clearInterval(This.time);
}
},30);
}
aA[i].onmouseout=function(){
clearInterval(This.time);
var This=this;
This.time=setInterval(function(){
This.style.width=This.offsetWidth-8+'px';
if(This.offsetWidth<=100){
clearInterval(This.time);
}
},30);
}
}
}
</script>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<ul>
<li><a class="on" href="" title="">首页</a></li>
<li><a href="" title="">资讯</a></li>
<li><a href="" title="">新闻</a></li>
<li><a href="" title="">产品展示</a></li>
</ul>
</body>
</html>
