我的漫漫程序之旅

          專注于JavaWeb開發(fā)
          隨筆 - 39, 文章 - 310, 評論 - 411, 引用 - 0
          數(shù)據(jù)加載中……

          JS的QQ菜單

          <html>
          <head>
          <title>QQ菜單</title>
          <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
          <script language='JavaScript'>
          var headHeight = 22;var bodyHeight = 202;var objcount = 4;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);
          }

          function moveme(obj)
          {
           idnumber 
          = parseInt(obj.id.substr(4));
           objtop 
          = headHeight * (idnumber - 1);
           objbuttom 
          = bodyHeight + headHeight * (idnumber - 2);
           currenttop 
          = parseInt(obj.style.top);
           
          if (currenttop >= objbuttom)
           
          {
            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
          --;
             }

           }

          }

          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}
          td
          {font-size:9pt}
          body
          {font-size:9pt}
          {  font-size: 9pt; color: #0066CC; text-decoration: none}
          a:hover 
          {  font-size: 9pt; color: #990000}
          </style>
          </head>
          <body bgcolor='#FFFFFF' text='#000000'>
          <div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:268px; z-index:1; overflow: hidden; background: #99CCFF;'> <div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:202px; 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'>
                    
          <table width="99%" border="0" cellspacing="1" cellpadding="1" height="100%">
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="/">子菜單子菜單</a></td>
                      
          </tr>
                    
          </table>
                  
          </td></tr></table></div><div id='item2body' style='position:absolute; left:0; top:202; width:120px; height:202px; 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'>
                    
          <table width="99%" border="0" cellspacing="1" cellpadding="1" height="100%">
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="http://www.aygfsteel.com/supercrsky" target="_blank">子菜單子菜單</a></td>
                      
          </tr>
                      
          <tr> 
                        
          <td bgcolor="#D9ECFF" align="center"><href="/">子菜單子菜單</a></td>
                      
          </tr>
                    
          </table>
                  
          </td></tr></table></div><div id='item3body' style='position:absolute; left:0; top:224; width:120px; height:202px; 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'>自己在這里隨便<br>
                    添加點什么都可以
          </td>
                
          </tr></table></div><div id='item4body' style='position:absolute; left:0; top:246; width:120px; height:202px; 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'>自己在這里隨便<br>
                    添加點什么都可以
          </td>
                
          </tr></table></div></div></body></html>


          posted on 2008-02-22 21:56 々上善若水々 閱讀(1646) 評論(0)  編輯  收藏 所屬分類: JavaScript

          主站蜘蛛池模板: 聊城市| 阿尔山市| 来凤县| 密山市| 汝南县| 西乌珠穆沁旗| 辉县市| 维西| 丰县| 诏安县| 蒲江县| 嘉黎县| 敦煌市| 康保县| 香河县| 富阳市| 乌兰察布市| 钦州市| 应城市| 胶南市| 土默特右旗| 马公市| 罗平县| 南川市| 项城市| 大同县| 成都市| 正蓝旗| 洛隆县| 北宁市| 汉源县| 沙河市| 沅江市| 元阳县| 台安县| 樟树市| 黄石市| 津市市| 惠州市| 富宁县| 织金县|