哪位js高手能帮我解释这段代码

<body><divid='main'><ulid='nav'class='clear'><li><ahref='#'>百度</a></li></ul><ulid='ch... <body>
<div id='main'>
<ul id='nav' class='clear'>
<li><a href='#'>百度</a></li>
</ul>
<ul id='chilenav' class='clear'>
<li class='clear'><a href='#'>百度招聘</a><a href='#'>百度文库</a><a href='#'>百度地图</a><a href='#'>百度推广</a></li>
<li>同上</li>
</ul>
</div>
</body>

window.onload = function(){
var nDiv = document.getElementById('nav'),
nlis = nDiv.getElementsByTagName('li'),
chDiv = document.getElementById('chilenav'),
chlis = chDiv.getElementsByTagName('li'),
dLen = nlis.length,
timer = null;
nDiv.style.width = nlis[0].offsetWidth*dLen + 'px';

for(var i = 0; i < dLen; i++){
var active = function(elem){
elem.index = i;
elem.onmouseover = function(){
elemOver(chlis[this.index], nlis[this.index], dLen, timer);
};
elem.onmouseout = function(){
timer = elemOut(this, chlis[this.index], 300);
};
}
active(nlis[i]);
active(chlis[i]);
}
}

function elemOver(cElem, nElem, len, timer){
clearTimeout(timer);
for(var j = 0; j < len; j++){
cElem.parentNode.getElementsByTagName('li')[j].style.display = 'none';
}
cElem.style.display = 'block';
cElem.parentNode.style.left = nElem.offsetLeft + 'px';
cElem.parentNode.style.top = nElem.offsetTop + nElem.offsetHeight + 10 + 'px';
}

function elemOut(_this, cElem, time){
return setTimeout(function(){cElem.style.display = 'none';} , time);
}
回答详细的可以加分展开

 我来答

1个回答

#热议# 不吃早饭真的会得胆结石吗？

乌微月2S
2013-06-19 · TA获得超过5037个赞

知道大有可为答主

回答量：5361

采纳率：42%

帮助的人：2872万

我也去答题访问个人页

关注

展开全部

<div id='main'>
<ul id='nav' class='clear'>
<li><a href='#'>百度</a></li>
</ul>
<ul id='chilenav' class='clear'>
<li class='clear'><a href='#'>百度招聘</a><a href='#'>百度文库</a><a href='#'>百度地图</a><a href='#'>百度推广</a></li>
<li>同上</li>
</ul>
</div>
</body>

window.onload = function(){
var nDiv = document.getElementById('nav'),//获取元素
nlis = nDiv.getElementsByTagName('li'),//获取元素
chDiv = document.getElementById('chilenav'),//获取元素
chlis = chDiv.getElementsByTagName('li'),//获取元素
dLen = nlis.length,//li的个数
timer = null;
nDiv.style.width = nlis[0].offsetWidth*dLen + 'px';//定义nDiv的宽度

for(var i = 0; i < dLen; i++){//做循环，
var active = function(elem){//定义方法
elem.index = i;
elem.onmouseover = function(){//定义元素的鼠标事件，鼠标移动到元素上的事件
elemOver(chlis[this.index], nlis[this.index], dLen, timer);
};
elem.onmouseout = function(){//定义元素的鼠标事件，鼠标离开元素的时间
timer = elemOut(this, chlis[this.index], 300);
};
}
active(nlis[i]);//激活方法
active(chlis[i]);//激活方法
}
}

function elemOver(cElem, nElem, len, timer){
clearTimeout(timer);//清除延时执行的函数
for(var j = 0; j < len; j++){做循环
cElem.parentNode.getElementsByTagName('li')[j].style.display = 'none';//把元素cElem的父元素下的li都给隐藏了
}
cElem.style.display = 'block';//元素cElem显示
cElem.parentNode.style.left = nElem.offsetLeft + 'px';//元素cElem 的父元素的left设定 cElem.parentNode.style.top = nElem.offsetTop + nElem.offsetHeight + 10 + 'px';//元素cElem的父元素的top设定
}

function elemOut(_this, cElem, time){
return setTimeout(function(){cElem.style.display = 'none';} , time);//延迟时间内隐藏
}
整体功能就是导航栏的功能吧，单击一个图标显示一个连接，其他隐藏。
其实是些的复杂了，正常的导航栏不会这么复杂。

更多追问追答

追问

很感谢你 你非常用心 能再告诉我这条吗
elem.index = i;  我一直不明白'.index'是什么意思

追答

给elem加一个属性，index。

这个index就是这个li在数组中顺序。
elemOver(chlis[this.index], nlis[this.index], dLen, timer);

方便和循环关联，下面这儿用的
elemOver(chlis[this.index], nlis[this.index], dLen, timer);

和这个也有关
active(nlis[i]);//激活方法

不知道你明白没有。
他是给每个li都加上鼠标事件。

本回答被提问者采纳

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

哪位js高手能帮我解释这段代码

其他类似问题

为你推荐：