DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS特效代碼--仿windows xp左側菜單效果
JS特效代碼--仿windows xp左側菜單效果
編輯:JavaScript綜合知識     

 <html>

<head>
<style type="text/css">
<!--
UNKNOWN { COLOR: #215dc6; TEXT-DECORATION: none}
A:visited { COLOR: #215dc6; TEXT-DECORATION: none}
A:hover { COLOR: #6699cc; TEXT-DECORATION: none}
A:active { COLOR: #ff0000; TEXT-DECORATION: none}

.cB8CDFF { FONT-SIZE: 14px; COLOR: #b8cdff}
.c215DC6 { FONT-SIZE: 14px; COLOR: #215dc6}

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

function MFXinitMenu(){
IE = document.all ? 1:0;
NN = document.layers ? 1:0;
HIDDEN = (NN) ? 'hide' : 'hidden';
VISIBLE = (NN) ? 'show' : 'visible';
myLayer=new Array();
mySpeed=5;
subLeft=0;
closes=true;
myLayer[0]=(NN) ? document.MFX0 : document.all.MFX0.style;
myLayer[1]=(NN) ? document.MFX1 : document.all.MFX1.style;
myLayer[2]=(NN) ? document.MFX2 : document.all.MFX2.style;
myLayer[3]=(NN) ? document.MFX3 : document.all.MFX3.style;
myLayer[4]=(NN) ? document.MFX4 : document.all.MFX4.style;
myLayer[5]=(NN) ? document.MFX5 : document.all.MFX5.style;
myLayer[6]=(NN) ? document.MFX6 : document.all.MFX6.style;
myLayer[7]=(NN) ? document.MFX7 : document.all.MFX7.style;
running=false;
whichOpen=-1;
lastMain=myLayer.length-2;
MFXmain=new Array();
for(i=0; i<myLayer.length; i++){
mainORsub= i % 2;
MFXmain[i] = mainORsub ? 0:1;
}
myTop=new Array();
myLeft=new Array();
myHeight=new Array();
myWidth=new Array();
mySlide=new Array();
for(i=0; i<myLayer.length; i++){
if(NN&&MFXmain[i]){
if(i==0){
myTop[i]=myLayer[i].top;
myLeft[i]=myLayer[i].left;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
myLayer[i].left=myLeft[i];
myLayer[i].top=myTop[i];
myLayer[i].visibility=VISIBLE;}
if(NN&&!MFXmain[i]){
myTop[i]=myTop[i-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
mySlide[i]=myTop[i]+myHeight[i];
myLayer[i].left=myLeft[i]+subLeft;
myLayer[i].top=myTop[i];}
if(IE&&MFXmain[i]){
if(i==0){
myLeft[i]=myLayer[i].pixelLeft;
myTop[i]=myLayer[i].pixelTop;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
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-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
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(myName,newspeed){
ieStep=0;
thereS=false;
thereC=false;
if(newspeed>0){mySpeed=newspeed;}
first=myName;
if(whichOpen==-1&&!running&&MFXmain[myName]&&!(whichOpen==myName)){
running=true;
if(NN){
myLayer[myName+1].clip.height=0;
myLayer[myName+1].visibility=VISIBLE;
}
if(IE){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
myLayer[myName+1].visibility=VISIBLE;
}
MFXopenMenuS(myName);
MFXopenMenuC(myName);
}
if(whichOpen>=0&&!running&&!(whichOpen==myName)){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
}
if(whichOpen>=0&&!running&&whichOpen==myName&&closes){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
 }
}
function MFXstopCloseS(myName){
running=false;
thereCS=true;
if(closes&&first==whichOpen){whichOpen=-1;}
else{whichOpen=-1;
MFXrunMenu(first);
}
}
function MFXstopOpenS(myName){
running=false;
thereS=true;
if(IE){myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";}
whichOpen=myName;
}
function MFXopenMenuS(myName){
myStep=mySpeed;
if(NN&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].top+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].top;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].top+=myStep;
}
if(myLayer[first+2].top==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
if(IE&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].pixelTop+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].pixelTop;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop+=myStep;
}
if(myLayer[first+2].pixelTop==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
}
function MFXopenMenuC(myName){
myStep=mySpeed;
if(NN&&!thereC){
if ((myLayer[first+1].clip.height+myStep)>myHeight[first+1]){
myLayer[first+1].clip.height=myHeight[first+1]
}
if(myLayer[first+1].clip.height==myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)

}else{
myLayer[first+1].clip.height+=myStep;

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

if(ieStep>=myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
}
function MFXcloseMenuS(myName){
myStep=mySpeed;
if(NN&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].top-myStep<myTop[second+2]){
myStep=myLayer[second+2].top-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].top-=myStep;

}
if(myLayer[second+2].top==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
if(IE&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].pixelTop-myStep<myTop[second+2]){
myStep=myLayer[second+2].pixelTop-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop-=myStep;

}
if(myLayer[second+2].pixelTop==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
}
function MFXcloseMenuC(myName){
myStep=-mySpeed;
ieStep1-=mySpeed;
if(NN&&!thereCC){
if ((myLayer[second+1].clip.bottom+myStep)<0){
myLayer[second+1].clip.bottom=0;
}
if(myLayer[second+1].clip.bottom==0){
thereCC=true;

if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[second+1].clip.bottom+=myStep;

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
if(IE&&!thereCC){
if(ieStep1<=0){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
thereCC=true;
if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep1) +" "+ ("auto") +")";

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
}

function MM_findObj(n, d) { //v4.0
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</script>
</head>

<body onload="MFXinitMenu()" bgcolor="#2377B8">

<table width="400" border="0" cellspacing="0" cellpadding="0" height="300">
 <tr>
 <td>
 <div id="MFX0" style="position:absolute; width:150px; height:25px; z-index:2; left:50px; top: 50px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td background="http://www.smallrain.net/jsimg/left_background_01.gif" height="25">
  <b><a href="#" class="c215DC6" onclick="MFXrunMenu(0,5)">網絡配置中心</a></b></td>
 <td background="http://www.smallrain.net/jsimg/left_background_02.gif" width="21" height="25">
 </td>
 <td width="25">
 <a href="#" class="c215DC6" onclick="MFXrunMenu(0,5)">
 <img src="http://www.smallrain.net/jsimg/left_arrow_down.gif" width="25" height="25" border="0"></a></td>
 </tr>
 </table>
 </div>
 <div id="MFX1" style="position:absolute; width:150px; height:126px; z-index:1; left:50px; top: 75px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
 <tr>
 <td width="1" bgcolor="FFFFFF"></td>
 <td width="154" bgcolor="D6DFF7" height="125" align="center">
 <table width="130" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_01.gif" width="16" height="16"></td>
 <td width="108">
 <a href="ethernet.htm" class="c215DC6">以太網設置</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_02.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/ddns.cgi" class="c215DC6">動態域名</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_03.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/dhcp.cgi" class="c215DC6">DHCP服務</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_04.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/usbadslfw.cgi" class="c215DC6">ADSL設置</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_05.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/modem.cgi" class="c215DC6">MODEM設置</a></td>
 </tr>
 </table>
 </td>
 <td width="1" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="3" height="1"></td>
 </tr>
 </table>
 </div>
 <div id="MFX2" style="position:absolute; width:150px; height:38px; z-index:2; left:50px; top: 201px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="13" colspan="3"></td>
 </tr>
 <tr>
 <td background="http://www.smallrain.net/jsimg/left_background_01.gif" height="25">
  <b><a href="#" class="c215DC6" onclick="MFXrunMenu(2,5)">安全配置中心</a></b></td>
 <td background="http://www.smallrain.net/jsimg/left_background_02.gif" width="21" height="25">
 </td>
 <td width="25">
 <a href="#" class="c215DC6" onclick="MFXrunMenu(2,5)">
 <img src="http://www.smallrain.net/jsimg/left_arrow_down.gif" width="25" height="25" border="0"></a></td>
 </tr>
 </table>
 </div>
 <div id="MFX3" style="position:absolute; width:150px; height:106px; z-index:1; left:50px; top: 226px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
 <tr>
 <td width="1" bgcolor="FFFFFF"></td>
 <td width="154" bgcolor="D6DFF7" height="105" align="center">
 <table width="130" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_06.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/ids.cgi" class="c215DC6">入侵檢測系統</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_07.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/proxy.cgi" class="c215DC6">行為管理系統</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_08.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/vpnmain.cgi" class="c215DC6">虛擬網系統</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_09.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/xtaccess.cgi" class="c215DC6">防火牆系統</a></td>
 </tr>
 </table>
 </td>
 <td width="1" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="3" height="1"></td>
 </tr>
 </table>
 </div>
 <div id="MFX4" style="position:absolute; width:150px; height:38px; z-index:2; left:50px; top: 302px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="13" colspan="3"></td>
 </tr>
 <tr>
 <td background="http://www.smallrain.net/jsimg/left_background_01.gif" height="25">
  <b><a href="#" class="c215DC6" onclick="MFXrunMenu(4,5)">系統報告中心</a></b></td>
 <td background="http://www.smallrain.net/jsimg/left_background_02.gif" width="21" height="25">
 </td>
 <td width="25">
 <a href="#" class="c215DC6" onclick="MFXrunMenu(4,5)">
 <img src="http://www.smallrain.net/jsimg/left_arrow_down.gif" width="25" height="25" border="0"></a></td>
 </tr>
 </table>
 </div>
 <div id="MFX5" style="position:absolute; width:150px; height:106px; z-index:1; left:50px; top: 357px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
 <tr>
 <td width="1" bgcolor="FFFFFF"></td>
 <td width="154" bgcolor="D6DFF7" height="106" align="center">
 <table width="130" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_10.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/status.cgi" class="c215DC6">系統狀態</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_11.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/graphs.cgi" class="c215DC6">網絡流量圖</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_12.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/connections.cgi" class="c215DC6">TCP連接</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_13.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/logs.cgi/log.dat" class="c215DC6">
 系統日志</a></td>
 </tr>
 </table>
 </td>
 <td width="1" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="3" height="1"></td>
 </tr>
 </table>
 </div>
 <div id="MFX6" style="position:absolute; width:150px; height:38px; z-index:2; left:50px; top: 463px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="13" colspan="3"></td>
 </tr>
 <tr>
 <td background="http://www.smallrain.net/jsimg/left_background_01.gif" height="25">
  <b><a href="#" class="c215DC6" onclick="MFXrunMenu(6,5)">高級配置中心</a></b></td>
 <td background="http://www.smallrain.net/jsimg/left_background_02.gif" width="21" height="25">
 </td>
 <td width="25">
 <a href="#" class="c215DC6" onclick="MFXrunMenu(6,5)">
 <img src="http://www.smallrain.net/jsimg/left_arrow_down.gif" width="25" height="25" border="0"></a></td>
 </tr>
 </table>
 </div>
 <div id="MFX7" style="position:absolute; width:150px; height:116px; z-index:1; left:50px; top: 488px; visibility: hidden">
 <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
 <tr>
 <td width="1" bgcolor="FFFFFF"></td>
 <td width="154" bgcolor="D6DFF7" height="150" align="center">
 <table width="130" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_14.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/remote.cgi" class="c215DC6">安全遠程訪問</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_09.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/changepw.cgi" class="c215DC6">密碼設置</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_17.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/updates.cgi" class="c215DC6">系統更新</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_18.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/backup.cgi" class="c215DC6">系統備份</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_19.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/recover.cgi" class="c215DC6">系統恢復</a></td>
 </tr>
 <tr>
 <td width="22" height="23">
 <img src="http://www.smallrain.net/jsimg/icon_small_15.gif" width="16" height="16"></td>
 <td width="108">
 <a href="/cgi-bin/shutdown.cgi" class="c215DC6">主機控制</a></td>
 </tr>
 </table>
 </td>
 <td width="1" bgcolor="FFFFFF"></td>
 </tr>
 <tr bgcolor="FFFFFF">
 <td colspan="3" height="1"></td>
 </tr>
 </table>
 </div>
 </td>
 </tr>
</table>
</body>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved