为了账号安全,请及时绑定邮箱和手机立即绑定

为什么没有显示效果?代码在Sublime Text编写的,在360页面打开?是兼容性的问题吗?还是代码出错了?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航菜单</title>
        <style type="text/css">
        /*
        background:url(juxing.png)圆角矩形的实现
         */
        *{margin:0 ;padding:0;font-size: 14px;}
        ul{list-style: none;height:50px;padding-left:300px;border-bottom: 5px solid #f60;}
        li{float:left;margin-top: 20px;}
        a{text-decoration: none;display: block;height:30px;line-height: 30px;width:120px;background: #ccc;margin-bottom: 1px;text-align: center;;}
       .on,a:hover{background:#f60;color:#fff;height:40px;line-height:40px;margin-top: -10px;}
        </style>
        <script type="text/javascript">
                window.onload=function(){
                    var aA=document.getElementsByTagName('a');
                    for(var i=0;i<aA.length;i++){
                        aA[i].onmouseover=function(){
                          clearInterval(This.time);
                          var This=this;
                          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){
                            This.style.width="100px";
                            clearInterval(This.time)
                          }
                          },30);  
                        }
                        
                    }
                }
        </script>
    </head>
    <body>
    <ul>
        <li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;页</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>

代码在Sublime Text编写的,在360页面打开?是兼容性的问题吗?还是代码出错了?

正在回答

2 回答

真正的错误应该是

clearInterval(This.time);和 var This=this;写反了


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

找到错误了,鼠标移开时清除动画应该是this.time而不是This.time.

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

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

为什么没有显示效果?代码在Sublime Text编写的,在360页面打开?是兼容性的问题吗?还是代码出错了?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信