请教高手：类似于QQ效果菜单的改良

<html>
  <head>
  <title>QQ菜单</title>
  <meta   http-equiv='Content-Type'   content='text/html;   charset=gb2312'>
  <script   language='JavaScript'>
    var   headHeight   =   22;  //菜单标题栏高度
    var   bodyHeight   =   302; //菜单高度（包括标题栏和内容体）
    var   objcount   =   5;
    var   step   =   10;
    var   moving   =   false;

/*******************
*
* 点击以后改变样式，
* 且移动
********************/
    function   showme(obj1,obj2)
    {

        if(moving)return;
        moving=true;
        for(i=0;i<document.all.tags('td').length;i++)
            if(document.all.tags('td')[i].className.indexOf('headtd')   ==   0)
               document.all.tags('td')[i].className   =   'headtd1';
        obj2.className   =   'headtd2';
        moveme(obj1);
    }

    /****************
*  移动判断
*  param:当前对象
****************/
    function   moveme(obj)
    {
       idnumber   =   parseInt(obj.id.substr(4));  //取菜单ID后的序号
       objtop   =   headHeight*(idnumber-1);

   //菜单底部的值,按从上到下的顺序,每个菜单底部的值递增 22(标题栏高度)
       objbuttom   =   bodyHeight   +   headHeight * (idnumber-2);         //第一个菜单的值为0,如果第一个菜单展开的话,第二个菜单的值为302,第一个菜单的标题栏是不变的
       currenttop   =   parseInt(obj.style.top);

   /*
   如果菜单1闭合的话,currenttop=0;objbuttom=280;objtop=0;
   */       if(currenttop   >=   objbuttom)   //如果 div 的上限Y值>
       {
          countid   =   1;
          for(i=0;i<document.all.tags('div').length;i++)
          if(document.all.tags('div')[i].id   ==   'item'+countid+'body')
          {

              obj   =   document.all.tags('div')[i];
              objtop   =   headHeight   *   (countid   -   1);                 if   (countid   ==   idnumber)
              {
                   moveup(obj,objtop,false);
                   break;
              }
              else
  {
                   moveup(obj,objtop,true);
  }
              countid++;
          }
       }
       else if((currenttop   <=   objtop)   &&   (idnumber   <   objcount))   //从最下面的菜单开始移动
       {

              idnumber++;
              countid   =   objcount;
              for(i=document.all.tags('div').length-1;i>=0;i--)
  {
                 if(document.all.tags('div')[i].id   ==   'item'+countid+'body')
                 {
                      obj   =   document.all.tags('div')[i];
                      objbuttom   =   bodyHeight   +   headHeight   *   (countid   -   2);
                      if   (countid   ==   idnumber)
                      {
                            movedown(obj,objbuttom,false);
                            break;
                      }
                      else
  {
                            movedown(obj,objbuttom,true);
  }
                      countid--;
                 }
     }
       }
   /*不管最后怎么样,都要把moving值赋回初值,否则会出问题.
   当moving=true是且moveup or movedown都没有运行时出现
   moving值无法成为初始状态的false值,按理论上讲,如果程序逻辑完善的话是不会出现类似的情况的
   但是,程序无法保证十全十美的情况下就会出现你讲的情况了
   */
   if (moving)moving=false;

    }

//向上移动
    function   moveup(obj,objtop,ismove)
    {
      currenttop   =   parseInt(obj.style.top);
      if   (currenttop   >   objtop)
      {
          obj.style.top   =   currenttop   -   step;
          setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
          return;
      }
      moving   =   ismove;
    }

//向下移动
    function   movedown(obj,objbuttom,ismove)
    {
       currenttop   =   parseInt(obj.style.top);
       if(currenttop   <   objbuttom)
       {
          obj.style.top   =   currenttop   +   step;
          setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)
          return;
       }
       moving   =   ismove;
    }

  </script>

  <style   type='text/css'>
  .headtd1{
      background:   #00A4E1;
  border:   2px   outset;
  border-color:   #00BBFF   #0077FF   #0077FF   #00BBFF;
  cursor:   hand;
  font-size:   9pt;
  }
  .headtd2   {   background:   #20C1FF;
  border:   2px   outset;
  border-color:   #60D3FF   #0077FF   #0077FF   #60D3FF;
  cursor:   hand;
  font-size:   9pt;
  }
  .bodytd   {   background:   #99CCFF;
  border:   2px   outset;
  border-color:   #B0D8FF   #0077FF   #0077FF   #B0D8FF;
  font-size:   9pt;
  }
  </style>
  </head>
  <body   bgcolor='#FFFFFF'   text='#000000'>
  <div   id='mainboard'   style='position:absolute;   left:2px;   top:2px;   width:120px;   height:390px;   z-index:1;   overflow:   hidden;   background:   #99CCFF;'>
      <div   id='item1body'   style='position:absolute;   left:0;   top:0;   width:120px;   height:302px;   z-index:2;   overflow:   hidden'>
     <table   width='100%'   border='0'   height='100%'   cellpadding='2'   cellspacing='0'>
    <tr>
    <td   id='item1head'   height='20'   class='headtd2'   onclick='showme(item1body,this)'   align='center'>菜单1</td>
</tr>
<tr>
   <td   class='bodytd'   align='center'>
   test
   </td>
</tr>
</table>
  </div>
  <div   id='item2body'   style='position:absolute;   left:0;   top:302;   width:120px;   height:302px;   z-index:3;   overflow:   hidden'>
     <table   width='100%'   border='0'   height='100%'   cellpadding='2'   cellspacing='0'>
   <tr>
     <td   id='item2head'   height='20'   class='headtd1'   onclick='showme(item2body,this)'   align='center'>
菜单2
</td>
   </tr>
   <tr>
     <td   class='bodytd'   align='center'>
    test
</td>
   </tr>
</table>
  </div>
  <div   id='item3body'   style='position:absolute;   left:0;   top:324;   width:120px;   height:302px;   z-index:4;   overflow:   hidden'>
    <table   width='100%'   border='0'   height='100%'   cellpadding='2'   cellspacing='0'>
   <tr>
     <td   id='item3head'   height='20'   class='headtd1'   onclick='showme(item3body,this)'   align='center'>
   菜单3
</td>
   </tr>
   <tr>
     <td   class='bodytd'   align='center'>
    test
</td>
   </tr>
</table>
  </div>
  <div   id='item4body'   style='position:absolute;   left:0;   top:346;   width:120px;   height:302px;   z-index:5;   overflow:   hidden'>
    <table   width='100%'   border='0'   height='100%'   cellpadding='2'   cellspacing='0'>
  <tr>
    <td   id='item4head'   height='20'   class='headtd1'   onclick='showme(item4body,this)'   align='center'>
  菜单4
</td>
  </tr>
  <tr>
    <td   class='bodytd'   align='center'>
    test
    </td>
  </tr>
    </table>
  </div>
  <div   id='item5body'   style='position:absolute;   left:0;   top:368;   width:120px;   height:302px;   z-index:6;   overflow:   hidden'>
    <table   width='100%'   border='0'   height='100%'   cellpadding='2'   cellspacing='0'>
  <tr>
    <td   id='item5head'   height='20'   class='headtd1'   onclick='showme(item5body,this)'   align='center'>
  菜单5
</td>
  </tr>
  <tr>
    <td   class='bodytd'   align='center'>
    test
</td>
  </tr>
</table>
  </div></div></body></html>

调试易

请教高手：类似于QQ效果菜单的改良

解决方案 »