熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JS特效代碼--仿windows xp左側菜單效果

2013-11-15 12:03:49  來源: JSP教程 

  <html>

  <head>
<style type="text/css">
<!
UNKNOWN { COLOR: #dc; TEXTDECORATION: none}
A:visited { COLOR: #dc; TEXTDECORATION: none}
A:hover { COLOR: #cc; TEXTDECORATION: none}
A:active { COLOR: #ff; TEXTDECORATION: none}

  cBCDFF { FONTSIZE: px; COLOR: #bcdff}
cDC { FONTSIZE: px; COLOR: #dc}

  >
</style>
<script language="JavaScript">
<!

  function MFXinitMenu(){
IE = documentall ? :;
NN = documentlayers ? :;
HIDDEN = (NN) ? hide : hidden;
VISIBLE = (NN) ? show : visible;
myLayer=new Array();
mySpeed=;
subLeft=;
closes=true;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
myLayer[]=(NN) ? documentMFX : documentallMFXstyle;
running=false;
whichOpen=;
lastMain=myLayerlength;
MFXmain=new Array();
for(i=; i<myLayerlength; i++){
mainORsub= i % ;
MFXmain[i] = mainORsub ? :;
}
myTop=new Array();
myLeft=new Array();
myHeight=new Array();
myWidth=new Array();
mySlide=new Array();
for(i=; i<myLayerlength; i++){
if(NN&&MFXmain[i]){
if(i==){
myTop[i]=myLayer[i]top;
myLeft[i]=myLayer[i]left;}
else{
myLeft[i]=myLeft[i];
myTop[i]=myTop[i]+myHeight[i];}
myHeight[i]=myLayer[i]clipheight;
myWidth[i]=myLayer[i]clipwidth;
myLayer[i]left=myLeft[i];
myLayer[i]top=myTop[i];
myLayer[i]visibility=VISIBLE;}
if(NN&&!MFXmain[i]){
myTop[i]=myTop[i]+myHeight[i];
myLeft[i]=myLeft[i];
myHeight[i]=myLayer[i]clipheight;
myWidth[i]=myLayer[i]clipwidth;
mySlide[i]=myTop[i]+myHeight[i];
myLayer[i]left=myLeft[i]+subLeft;
myLayer[i]top=myTop[i];}
if(IE&&MFXmain[i]){
if(i==){
myLeft[i]=myLayer[i]pixelLeft;
myTop[i]=myLayer[i]pixelTop;}
else{
myLeft[i]=myLeft[i];
myTop[i]=myTop[i]+myHeight[i];}
myHeight[i]=myLayer[i]pixelHeight;
myWidth[i]=myLayer[i]pixelWidth;
myLayer[i]left=myLeft[i];
myLayer[i]top=myTop[i];
myLayer[i]visibility=VISIBLE;}
if(IE&&!MFXmain[i]){
myTop[i]=myTop[i]+myHeight[i];
myLeft[i]=myLeft[i];
myHeight[i]=myLayer[i]pixelHeight;
myWidth[i]=myLayer[i]pixelWidth;
myLayer[i]pixelLeft=myLeft[i]+subLeft;
myLayer[i]pixelTop=myTop[i];
mySlide[i]=myTop[i]+myHeight[i];
}
}
}
function MFXrunMenu(myNamenewspeed){
ieStep=;
thereS=false;
thereC=false;
if(newspeed>){mySpeed=newspeed;}
first=myName;
if(whichOpen==&&!running&&MFXmain[myName]&&!(whichOpen==myName)){
running=true;
if(NN){
myLayer[myName+]clipheight=;
myLayer[myName+]visibility=VISIBLE;
}
if(IE){
myLayer[myName+]clip= "rect(" + ("auto") +" "+ ("auto") +" "+ () +" "+ ("auto") +")";
myLayer[myName+]visibility=VISIBLE;
}
MFXopenMenuS(myName);
MFXopenMenuC(myName);
}
if(whichOpen>=&&!running&&!(whichOpen==myName)){
running=true;
second=whichOpen;
ieStep=myHeight[second+];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
}
if(whichOpen>=&&!running&&whichOpen==myName&&closes){
running=true;
second=whichOpen;
ieStep=myHeight[second+];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
 }
}
function MFXstopCloseS(myName){
running=false;
thereCS=true;
if(closes&&first==whichOpen){whichOpen=;}
else{whichOpen=;
MFXrunMenu(first);
}
}
function MFXstopOpenS(myName){
running=false;
thereS=true;
if(IE){myLayer[myName+]clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";}
whichOpen=myName;
}
function MFXopenMenuS(myName){
myStep=mySpeed;
if(NN&&!thereS&&!(first==lastMain)){
if(myLayer[first+]top+myStep>mySlide[first+]){
myStep=mySlide[first+]myLayer[first+]top;
}
for(i=first+; i<myLayerlength; i+=){
myLayer[i]top+=myStep;
}
if(myLayer[first+]top==mySlide[first+]){
MFXstopOpenS(first)
}
if(running)setTimeout(MFXopenMenuS(first));
}
if(IE&&!thereS&&!(first==lastMain)){
if(myLayer[first+]pixelTop+myStep>mySlide[first+]){
myStep=mySlide[first+]myLayer[first+]pixelTop;
}
for(i=first+; i<myLayerlength; i+=){
myLayer[i]pixelTop+=myStep;
}
if(myLayer[first+]pixelTop==mySlide[first+]){
MFXstopOpenS(first)
}
if(running)setTimeout(MFXopenMenuS(first));
}
}
function MFXopenMenuC(myName){
myStep=mySpeed;
if(NN&&!thereC){
if ((myLayer[first+]clipheight+myStep)>myHeight[first+]){
myLayer[first+]clipheight=myHeight[first+]
}
if(myLayer[first+]clipheight==myHeight[first+]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)

  }else{
myLayer[first+]clipheight+=myStep;

  }
if(running)setTimeout(MFXopenMenuC(first));
}
if(IE&&!thereC){
ieStep+=myStep;
myLayer[myName+]clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";

  if(ieStep>=myHeight[first+]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)
}
if(running)setTimeout(MFXopenMenuC(first));
}
}
function MFXcloseMenuS(myName){
myStep=mySpeed;
if(NN&&!thereCS&&!(second==lastMain)){
if(myLayer[second+]topmyStep<myTop[second+]){
myStep=myLayer[second+]topmyTop[second+];
}
for(i=second+; i<myLayerlength; i+=){
myLayer[i]top=myStep;

  }
if(myLayer[second+]top==myTop[second+]){
MFXstopCloseS(second);
}
if(running)setTimeout(MFXcloseMenuS(second));
}
if(IE&&!thereCS&&!(second==lastMain)){
if(myLayer[second+]pixelTopmyStep<myTop[second+]){
myStep=myLayer[second+]pixelTopmyTop[second+];
}
for(i=second+; i<myLayerlength; i+=){
myLayer[i]pixelTop=myStep;

  }
if(myLayer[second+]pixelTop==myTop[second+]){
MFXstopCloseS(second);
}
if(running)setTimeout(MFXcloseMenuS(second));
}
}
function MFXcloseMenuC(myName){
myStep=mySpeed;
ieStep=mySpeed;
if(NN&&!thereCC){
if ((myLayer[second+]clipbottom+myStep)<){
myLayer[second+]clipbottom=;
}
if(myLayer[second+]clipbottom==){
thereCC=true;

  if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[second+]clipbottom+=myStep;

  }
if(running)setTimeout(MFXcloseMenuC(second));
}
if(IE&&!thereCC){
if(ieStep<=){
myLayer[myName+]clip= "rect(" + ("auto") +" "+ ("auto") +" "+ () +" "+ ("auto") +")";
thereCC=true;
if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[myName+]clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";

  }
if(running)setTimeout(MFXcloseMenuC(second));
}
}

  function MM_findObj(n d) { //v
 var pix; if(!d) d=document; if((p=nindexOf("?"))>&&parentframeslength) {
 d=parentframes[nsubstring(p+)]document; n=nsubstring(p);}
 if(!(x=d[n])&&dall) x=dall[n]; for (i=;!x&&i<dformslength;i++) x=dforms[i][n];
 for(i=;!x&&dlayers&&i<dlayerslength;i++) x=MM_findObj(ndlayers[i]document);
 if(!x && documentgetElementById) x=documentgetElementById(n); return x;
}
//>
</script>
</head>

  <body onload="MFXinitMenu()" bgcolor="#B">

  <table width="" border="" cellspacing="" cellpadding="" height="">
 <tr>
 <td>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td background="
  <b><a href="#" class="cDC" onclick="MFXrunMenu()">網絡配置中心</a></b></td>
 <td background="
 </td>
 <td width="">
 <a href="#" class="cDC" onclick="MFXrunMenu()">
 <img src="
 </tr>
 </table>
 </div>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="" align="center">
 <tr>
 <td width="" bgcolor="FFFFFF"></td>
 <td width="" bgcolor="DDFF" height="" align="center">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="ethernethtm" class="cDC">以太網設置</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/ddnscgi" class="cDC">動態域名</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/dhcpcgi" class="cDC">DHCP服務</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/usbadslfwcgi" class="cDC">ADSL設置</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/modemcgi" class="cDC">MODEM設置</a></td>
 </tr>
 </table>
 </td>
 <td width="" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="" height=""></td>
 </tr>
 </table>
 </div>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td height="" colspan=""></td>
 </tr>
 <tr>
 <td background="
  <b><a href="#" class="cDC" onclick="MFXrunMenu()">安全配置中心</a></b></td>
 <td background="
 </td>
 <td width="">
 <a href="#" class="cDC" onclick="MFXrunMenu()">
 <img src="
 </tr>
 </table>
 </div>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="" align="center">
 <tr>
 <td width="" bgcolor="FFFFFF"></td>
 <td width="" bgcolor="DDFF" height="" align="center">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/idscgi" class="cDC">入侵檢測系統</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/proxycgi" class="cDC">行為管理系統</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/vpnmaincgi" class="cDC">虛擬網系統</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/xtaccesscgi" class="cDC">防火牆系統</a></td>
 </tr>
 </table>
 </td>
 <td width="" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="" height=""></td>
 </tr>
 </table>
 </div>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td height="" colspan=""></td>
 </tr>
 <tr>
 <td background="
  <b><a href="#" class="cDC" onclick="MFXrunMenu()">系統報告中心</a></b></td>
 <td background="
 </td>
 <td width="">
 <a href="#" class="cDC" onclick="MFXrunMenu()">
 <img src="
 </tr>
 </table>
 </div>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="" align="center">
 <tr>
 <td width="" bgcolor="FFFFFF"></td>
 <td width="" bgcolor="DDFF" height="" align="center">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/statuscgi" class="cDC">系統狀態</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/graphscgi" class="cDC">網絡流量圖</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/connectionscgi" class="cDC">TCP連接</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/logscgi/logdat" class="cDC">
 系統日志</a></td>
 </tr>
 </table>
 </td>
 <td width="" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="" height=""></td>
 </tr>
 </table>
 </div>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td height="" colspan=""></td>
 </tr>
 <tr>
 <td background="
  <b><a href="#" class="cDC" onclick="MFXrunMenu()">高級配置中心</a></b></td>
 <td background="
 </td>
 <td width="">
 <a href="#" class="cDC" onclick="MFXrunMenu()">
 <img src="
 </tr>
 </table>
 </div>
 <div id="MFX" style="position:absolute; width:px; height:px; zindex:; left:px; top: px; visibility: hidden">
 <table width="" border="" cellspacing="" cellpadding="" align="center">
 <tr>
 <td width="" bgcolor="FFFFFF"></td>
 <td width="" bgcolor="DDFF" height="" align="center">
 <table width="" border="" cellspacing="" cellpadding="">
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/remotecgi" class="cDC">安全遠程訪問</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/changepwcgi" class="cDC">密碼設置</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/updatescgi" class="cDC">系統更新</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/backupcgi" class="cDC">系統備份</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/recovercgi" class="cDC">系統恢復</a></td>
 </tr>
 <tr>
 <td width="" height="">
 <img src="
 <td width="">
 <a href="/cgibin/shutdowncgi" class="cDC">主機控制</a></td>
 </tr>
 </table>
 </td>
 <td width="" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="" height=""></td>
 </tr>
 </table>
 </div>
 </td>
 </tr>
</table>
</body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20192.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.