不明白我的为啥运行不出来
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;font-size:14px;}
.nav{
width:900px;
margin:0 auto;
}
ul{
height:30px;
list-style:none;
width:100%;
text-align:center;
margin-top:30px;
margin-left:100px;
border-bottom:4px solid yellow;
}
/*菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。*/
li{
float:left;
}
a {
display:block;
width:120px;
height:30px;
color:black;
font-size:16px;
text-decoration:none;
text-align:center;
line-height:30px;
background-color:gray;
}
.on ,a:hover{
display:block;
color:red;
background-color:yellow;
}
</style>
<script type="text/javascript">
window.onload=function (){
var aA=document.getElementByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onmouseover=function (){
clearInterval(This.time);
var This=this; /*把当前的this对象传进来*/
This.time=setInterval(function (){
This.style.width=This.offsetWidth+8+"px"; /*8是变宽的速度*/
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<=120){
This.style.width="120px";
clearInterval(This.time);
}
},30);
}
}
}
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a class="on" href="">首 页</a></li>
<li><a href="">新闻快讯</a></li>
<li><a href="">产品展示</a></li>
<li><a href="">售后服务</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
</html>
