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

我自己看这个语法没错但却显示不出来动画效果,是哪里错了吗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>动画菜单</title>

<style type="text/css">

* { margin: 0; padding: 0; font-size: 14px; }

a { color: #333; text-decoration: none }

ul{ list-style: none; }

.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}

.nav li { float: left; position:relative; height:30px; width:120px }

.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }

.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}

.subNav li a{ background:#ddd }

.subNav li a:hover{ background:#efefef}

</style>

<script>

window.onload=function(){

    var aLi=document.getElementsByTagName('li');

for(var i=0; i<aLi.length; i++){

aLi[i].onmouseover=function(){

        var oSubNav=this.getElementsByTagName('ul')[0];//鼠标经过一级菜单,二级菜单动画下拉显示出来

   if(oSubNav){

            var This=oSubNav;

            clearInterval(This.time);

            This.time=setInterval(function(){

            This.style.height=This.offsetHeght+16+"px";

                if(This.offsetHeght>=120)

                    clearInterval(This.time);

            },30)

        }

        }

        //鼠标离开菜单,二级菜单动画收缩起来。

aLi[i].onmouseout=function(){

            var oSubNav=this.getElementsByTagName('ul')[0];

            if(oSubNav){

                var This=oSubNav;

                clearInterval(This.time);

                This.time=setInterval(function(){

                    This.style.height=This.offsetHeght-16+"px";

                    if(This.offsetHeight<=0)

                        clearInterval(This.time);

                },30)

            }          

        }

    }

}   

</script>

</head>

<body>

<ul class="nav">

    <li><a href="#">一级菜单</a>

    <ul class="subNav">

        <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

        </ul>

    </li>

    <li><a href="#">一级菜单</a>

    <ul class="subNav">

        <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

        </ul>

    </li>

    <li><a href="#">一级菜单</a></li>

    <li><a href="#">一级菜单</a></li>

    <li><a href="#">一级菜单</a></li>

</ul>

</body>

</html>


正在回答

1 回答

 This.style.height=This.offsetHeght+16+"px";这一句

是This.offsetHeight差了一个i

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

总裁的宝贝

This.style.height=This.offsetHeght-16+"px";这一句也是差了i
2016-02-02 回复 有任何疑惑可以回复我~
#2

Dog_leash 提问者

啊啊w(゚Д゚)w,太谢谢了
2016-02-05 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

我自己看这个语法没错但却显示不出来动画效果,是哪里错了吗

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