js中上拉菜单有关问题了

js中下拉菜单问题求助了
由于刚学js,不少例子中语句看不明白，向各位请教了。js代码中注有？？？？？号的地方
HTML code

<!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>
js中上拉菜单有关问题了

相关推荐
