javascript

位置:IT落伍者 >> javascript >> 浏览文章

JS特效代码--仿windows xp左侧菜单效果


发布日期:2021年11月08日
 
JS特效代码--仿windows xp左侧菜单效果

<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>

               

上一篇:JS判定是否原生方法

下一篇:Javascript无阻塞加载具体方式