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

这js代码 求解释 感觉脑容量不够了。。。。。。。麻烦说明一下脉络和变量取值 非常感谢!!!

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.offsetHeight+16+"px";

                    if(This.offsetHeight>=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.offsetHeight-16+"px";

                    if(This.offsetHeight<=0)

                    clearInterval(This.time);

                },30)

             }

          }

}

}


正在回答

5 回答

这个和水平伸缩的那个是相似的,只不过水平的改变的是宽度,这个改变的是高度。我们让一级菜单水平排列,让二级菜单垂直排列,并且将二级菜单隐藏,绝对定位到所选菜单之下。之后我们就开始用js制作鼠标移入移出时发生的动画效果,鼠标移入时,我们想让二级菜单有一定的速度缓慢下拉显示,并且向下延伸的高度是一定的,延伸动作和速度控制都可以用setInterval来实现,延伸可以写一个匿名函数,让他获取当前高度并改变成我们想要的高度,这个时候就必须有个判断,当高度达到一定的值就要停止延伸了;然后设定一个速度就ok了。鼠标移出是,思路一致,只是高度值相反而已。

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

慕斯3035540 提问者

if(oSubNav)。。。。请问这是什么意思啊???
2016-08-07 回复 有任何疑惑可以回复我~
#2

weibo_考早营_03695159 回复 慕斯3035540 提问者

变量不为空继续执行,如果li下没有ul标签,就不会往下执行
2016-08-12 回复 有任何疑惑可以回复我~
#3

慕斯3035540 提问者

非常感谢!
2016-08-13 回复 有任何疑惑可以回复我~

这段代码有个问题 :如果二级菜单内容更多,导致不是一致的高度(120px),那多余的菜单项就会被隐藏。不建议这样写

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

这道题写错了

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

这是选择了所有的li元素,包括二级菜单里的li也被选上了。


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

通过触发li,来遍历所有的ul二级菜单,并且通过函数,来改变二级菜单的高度,我建议写代码之前。一定要先看一下,给出的所有代码,思路要清晰,我第一遍,也是不知道怎么着手,所以,先弄清楚思路。

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

慕斯3035540 提问者

谢谢你
2016-08-18 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

这js代码 求解释 感觉脑容量不够了。。。。。。。麻烦说明一下脉络和变量取值 非常感谢!!!

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