为什么出不来动画效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图像</title>
</head>
<style>
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;height:50px;border-bottom:#F30 solid 5px;padding-left:50px;}
li{float:left;margin-top:20px;}
.on,a:hover{background:#F00;color:#FFF;}
a{text-decoration:none;display:block;width:120px;background:url(1.jpg);line-height:30px;height:30px;text-align:center;}

<script>
window.onload=function(){
var aA=document.getElementsByTagName('a');
for(var i=0;i<aA.length;i++)
{
      aA[i].onmouseover=function(){
          var This=this;
          This.time=setInterval(function(){
          This.style.width=This.offsetWidth+8+"px";
          },30)
      }
          if(This.offetWidth>=130){
            clearInterval(This.time);
          }
}
}

</script>
</style>
<body>
<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>

</body>
</html>

weibo_一光年_sunshi_03642119

2016-08-12

源自：导航条菜单的制作 5-1

关注问题我要回答

1213

操作

收起

3 回答

Accidie漠然回答被采纳 +3 积分
2016-08-12

同学,你的<script>放到了<style>里了,当然出不来了.把它放在body里或者head里的style下面,不要放里面.

0 回复有任何疑惑可以回复我~

收起回答

weibo_一光年_sunshi_03642119 提问者

这个我这里弄错了我发现改过来后还是不对

2016-08-12 回复有任何疑惑可以回复我~

Accidie漠然回复 weibo_一光年_sunshi_03642119 提问者

你应该是想要实现这节视频里的效果,里面有几点错误. 1.检测li标签的if语句位置不对,应该放到onmouseover语句的里面,this.offsetWidth+8+"px"的下面.而且你if语句里的条件写错了,是offsetWidth,不是offetWidth. 2.少写了一条onmouseout语句,也就是鼠标移出的语句. 修改后的代码给你贴在下面.

2016-08-12 回复有任何疑惑可以回复我~

Accidie漠然
2016-08-12

for(var i=0;i<aA.length;i++)
{
    aA[i].onmouseover=function(){
        var This=this;
        This.time=setInterval(function(){
            This.style.width=This.offsetWidth+8+"px";
            if(This.offsetWidth>=130){
                clearInterval(This.time);
            }
        },30)
    }
    aA[i].onmouseout=function(){
        var This=this;
        This.time=setInterval(function(){
            This.style.width=This.offsetWidth-8+"px";
            if(This.offsetWidth<=130){
                clearInterval(This.time);
            }
        },30)
    }
}

0 回复有任何疑惑可以回复我~

收起回答