QQ式的菜單

来源：互联网发布：cn域名隐私保护编辑：程序博客网时间：2024/04/30 11:13

<html><head> <link href="../css/Font.css" rel="stylesheet" type="text/css" /><script language="JavaScript">var titleHeight = 22; //標題的高度var bodyHeight = 160; //菜單內容項的高度var groupcount =8; //組的個數var step = 3; //移動速度//顯示菜單的內容function showDiv(obj1, obj2){ //以下循環為改變標題的背景顏色 for(i=0;i<document.all.tags("td").length;i++) { if (document.all.tags("td")[i].className == 'headtd') document.all.tags("td")[i].bgColor = '#cccc66'; } obj2.bgColor = '#cccc66'; moveme(obj1);}//移動菜單的內容function moveme(obj){ idnumber = parseInt(obj.id.substr(4)); objtop = titleHeight * (idnumber - 1); objbuttom = bodyHeight + titleHeight * (idnumber - 7); 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 = titleHeight * (countid - 1); moveup(obj,objtop); if (countid == idnumber) break; countid++; } }}else if ((currenttop <= objtop) && (idnumber < groupcount)){ //檢驗出每一個應該向下移動的層 idnumber++; countid = groupcount; 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 + titleHeight * (countid - 2); movedown(obj,objbuttom); if (countid == idnumber) break; countid--; } }}}//向上移動的方法function moveup(obj,objtop){ currenttop = parseInt(obj.style.top); if (currenttop > objtop) { obj.style.top = currenttop - step; window.setTimeout('moveup('+obj.id+','+objtop+')',1) }}//向下移動的方法function movedown(obj,objbuttom){ currenttop = parseInt(obj.style.top); if (currenttop < objbuttom) { obj.style.top = currenttop + step; window.setTimeout('movedown('+obj.id+','+objbuttom+')',1) }}</script><style type="text/css"></style></head>

<body bgcolor="#FFFFFF" text="#000000"><div id="mainboard" style="position:absolute; left:2px; top:2px; width:150px; height:316px; z-index:10; overflow: hidden; background-color: #cccc66;"> <div id="item1body" style="position:absolute; left:0; top:0; width:150px; height:160px; z-index:1; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item1head" height="20" class="headtd" onclick="showDiv(item1body,this)" bgcolor="#cccc66"> <div align="center">系統管理</div> </td> </tr> <tr> <td class="bodytd"> <div align="center"><a href="../Negative/UserAdd.aspx" class="MenuUnselected" target="mainFrame">申請人添加</a></div> <div align="center"><a href="../Negative/Password.aspx" class="MenuUnselected" target="mainFrame">密碼修改</a></div> <div align="center"><a href="../Negative/LoginOut.aspx" class="MenuUnselected" target="mainFrame">用戶注銷</a></div> </td> </tr> </table> </div> <div id="item2body" style="position:absolute; left:0px; top:160; width:150; height:160; z-index:2; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item2head" height="20" class="headtd" onclick="showDiv(item2body,this)" bgcolor="#cccc66"> <div align="center">底片作業</div> </td> </tr> <tr> <td class="bodytd"> <div align="center"><a href="../Negative/ApplyInfoAdd.aspx" class="MenuUnselected" target="mainFrame">底片申請</a></div> <div align="center"><a href="../Negative/ApplyInfoEdit.aspx" class="MenuUnselected" target="mainFrame">申請信息確認</a></div> <div align="center"><a href="../Negative/AllApplyInfoEdit.aspx" class="MenuUnselected" target="mainFrame">底片審核</a></div> <div align="center">底片量測發放作業</div> </td> </tr> </table> <p class="headtd"> </p> </div> <div id="item3body" style="position:absolute; left:0; top:182; width:150px; height:160; z-index:3"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item3head" height="20" class="headtd" onclick="showDiv(item3body,this)" bgcolor="#cccc66"> <div align="center">底片管理</div> </td> </tr> <tr> <td class="bodytd"><div align="center">底片存檔</div><div align="center">出片記錄</div><div align="center">報廢記錄</div> </td> </tr> </table> </div> <div id="item4body" style="position:absolute; left:0; top:204; width:150px; height:160; z-index:4; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item4head" height="20" class="headtd" onclick="showDiv(item4body,this)" bgcolor="#cccc66"> <div align="center">回收/作業</div> </td> </tr> <tr> <td class="bodytd"> <div align="center">底片回收</div> <div align="center">底片報廢</div> </td> </tr> </table> </div> <div id="item5body" style="position:absolute; left:0; top:226; width:150px; height:160; z-index:5; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item5head" height="20" class="headtd" onclick="showDiv(item5body,this)" bgcolor="#cccc66"> <div align="center">回收/作業</div> </td> </tr> <tr> <td class="bodytd"> <div align="center">底片回收</div> <div align="center">底片報廢</div> </td> </tr> </table> </div> <div id="item6body" style="position:absolute; left:0; top:248; width:150px; height:160; z-index:6; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item6head" height="20" class="headtd" onclick="showDiv(item6body,this)" bgcolor="#cccc66"> <div align="center">回收/作業</div> </td> </tr> <tr> <td class="bodytd"> <div align="center">底片回收</div> <div align="center">底片報廢</div> </td> </tr> </table> </div> <div id="item7body" style="position:absolute; left:0; top:270; width:150px; height:160; z-index:6; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item7head" height="20" class="headtd" onclick="showDiv(item7body,this)" bgcolor="#cccc66"> <div align="center">回收/作業</div> </td> </tr> <tr> <td class="bodytd"> <div align="center">底片回收</div> <div align="center">底片報廢</div> </td> </tr> </table> </div> <div id="item8body" style="position:absolute; left:0; top:292; width:150px; height:160; z-index:6; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item8head" height="20" class="headtd" onclick="showDiv(item8body,this)" bgcolor="#cccc66"> <div align="center">回收/作業</div> </td> </tr> <tr> <td class="bodytd"> <div align="center">底片回收</div> <div align="center">底片報廢</div> </td> </tr> </table> </div> </div></body></html>