js中下拉菜单问题求助了
由于刚学js,不少例子中语句看不明白,向各位请教了。js代码中注有?????号的地方
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript Sample</title><style type="text/css"><!--#mainNav { position: absolute; top:2px; height:30px; width:800px;}.mainItem { position: absolute; top:3px; height:27px; width:74px; padding:10px 0px; margin:0px; text-align:center; font-size:13px; background-image: url(images/tab1.gif); background-repeat:repeat-x;}.subItemNav { position: absolute; top: 30px; left: 0px; width: 100%; height: 20px; padding: 2px 0px 0px 100px; visibility: hidden; background-color:#61B38B;}.subItemNav a:link, .subItemNav a:visited { font-size: 80%; color: #ffffff;}.subItemNav a:hover { color: #cccccc;}</style></head><body onmousemove="closeAllSubItem(event);"><div id="headerNav"> <div id="mainNav"> <div id="mainItem1" class="mainItem" onmouseover="displaySubItem(this);">开发王</div> <div id="mainItem2" class="mainItem" onmouseover="displaySubItem(this);">最佳拍档</div> <div id="mainItem3" class="mainItem" onmouseover="displaySubItem(this);">Flash</div> <div id="mainItem4" class="mainItem" onmouseover="displaySubItem(this);">简体中文</div> <div id="mainItem5" class="mainItem" onmouseover="displaySubItem(this);">繁体中文</div> <div id="mainItem6" class="mainItem" onmouseover="displaySubItem(this);">其它语言</div> </div> <div id="subMenu1" class="subItemNav"> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JavaScript</a> | <a href="#">ASP</a> | <a href="#">ASP.NET(VB)</a> | <a href="#">ASP.NET(C#)</a> | <a href="#">JSP</a> | <a href="#">PHP</a> </div> <div id="subMenu2" class="subItemNav"> <a href="#">HTML/CSS/JavaScript</a> | <a href="#">ASP</a> | <a href="#">ASP.NET(VB)</a> | <a href="#">ASP.NET(C#)</a> | <a href="#">JSP</a> | <a href="#">PHP</a> </div> <div id="subMenu3" class="subItemNav"> <a href="#">动画王</a> | <a href="#">开发王</a> | <a href="#">FMS</a> | <a href="#">Flash Player:The Missing Manual</a> | <a href="#">ASP.NET for Flash</a> | <a href="#">ASP for Flash</a> | <a href="#">JSP for Flash</a> | <a href="#">PHP for Flash</a> </div> <div id="subMenu4" class="subItemNav"> <a href="#">some link</a> | <a href="#">some link</a> </div> <div id="subMenu5" class="subItemNav"> <a href="#">some link</a> | <a href="#">some link</a> </div> <div id="subMenu6" class="subItemNav"> <a href="#">some link</a> | <a href="#">some link</a> </div> </div><br /><br /><br /><br /><script type="text/javascript">// =========================[01]=========================// 初始化,// 变量totalItems表示共有多少个主菜单项var totalItems = 6;function init(){ for (var i=1; i<= totalItems; i++){ // 获取所有子菜单项div元素,并设置其样式 var oSubItem = document.getElementById("subMenu"+i);//注意括号中获取不同子菜单div的做法 oSubItem.style.visibility = "hidden" //默认开始时全部子菜单都是隐藏的 // 获取所有主菜单项div元素,并设置其样式,主要就是初始化定位 var oMainItem = document.getElementById("mainItem"+i);//注意括号中获取不同主菜单div的做法 oMainItem.style.left = 74*i+"px"; //设置主菜单初始状态的样式,注意相间同样距离的不同项的设置74*i,其中i是项目顺序。 }}init();// =========================[02]=========================// 鼠标指针移到主菜单项上方,触发该函数// 该函数重新设置主菜单项和子菜单项function displaySubItem(theobj){ for (var i=1; i<= totalItems; i++){ // var oSubItem = document.getElementById("subMenu"+i);//获取各个子菜单项 这个注释掉也行??????? // oSubItem.style.visibility = "hidden"; 这个设置隐藏的样式我觉得没必要了,初始是隐藏的,新样式在后面几句设置?????????? var oMainItem = document.getElementById("mainItem"+i); oMainItem.style.backgroundImage = "url(images/tab1.gif)"; } var mainItemIndex = theobj.getAttribute("id").toString().substring(8);//分别是获取属性函数,返回字符函数,提前字符函数(start,stop) //// var oSubItem = document.getElementById("subMenu"+mainItemIndex); ////stop可省略。这两句话怎么解析呢????什么意思呢?126中的有何不同呢? oSubItem.style.visibility="visible"; //显示子菜单行 theobj.style.backgroundImage = "url(images/tab2.gif)";//改变主菜单项的背景} // =========================[03]=========================// 鼠标指针移动时,触发该函数// 注意对象变量scopeY用于定义垂直方向上的范围,这里是从5-60// 表示主菜单项和子菜单项的范围// 该函数检查鼠标指针是否超出这个范围,从而重新设置子菜单项function closeAllSubItem(event){ var scopeY = {top:5,bot:60}; window.status=event.clientY; if ((event.clientY<scopeY.top)||(event.clientY>scopeY.bot)){ for (var i=1; i<= totalItems; i++){ var oSubItem = document.getElementById("subMenu"+i); oSubItem.style.visibility = "hidden"; } }}</script></body>