仿windows xp左侧菜单伸缩效果js特效

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>仿windows xp左侧菜单伸缩效果js特效</title> 
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>"> 
 
</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.; 
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()"> 
<div class="menu"> 
<DIV id="MFX0" style="position:absolute;   z-index:2;"><b><a href="#" onClick="MFXrunMenu(0,5)">+网络配置中心</a></b></DIV> 
<div id="MFX1" style="position:absolute;   z-index:1; left:200px; top: 75px; visibility: hidden"> 
<span>-<a href="#">站长手册</a></span> 
<span>-<a href="#">动态域名</a></span> 
<span>-<a href="#">DHCP服务</a></span> 
<span>-<a href="#">ADSL设置</a></span> 
<span>-<a href="#">MODEM设置</a></span> 
</div> 
<div id="MFX2" style="position:absolute;   z-index:2;"><b><a href="#" onClick="MFXrunMenu(2,5)">+安全配置中心</a></b></div> 
<DIV id="MFX3" style="position:absolute;   z-index:1; left:200px; top: 226px; visibility: hidden"> 
<span>-<a href="#">入侵检测系统</a></span> 
<span>-<a href="#">行为管理系统</a></span> 
<span>-<a href="#">虚拟网系统</a></span> 
<span>-<a href="#">防火墙系统</a></span> 
</DIV> 
<DIV id="MFX4" style="position:absolute;   z-index:2;"><b><a href="#" onClick="MFXrunMenu(4,5)">+系统报告中心</a></b></DIV> 
<DIV id="MFX5" style="position:absolute;   z-index:1; left:200px; top: 357px; visibility: hidden"> 
<span>-<a href="#">系统状态</a></span> 
<span>-<a href="#">网络流量图</a></span> 
<span>-<a href="#">TCP连接</a></span> 
<span>-<a href="#">系统日志</a></span> 
</DIV> 
<DIV id="MFX6" style="position:absolute;   z-index:2;"><b><a href="#" onClick="MFXrunMenu(6,5)">+高级配置中心</a></b></DIV> 
<DIV id="MFX7" style="position:absolute;   z-index:1; left:200px; top: 488px; visibility: hidden"> 
<span>-<a href="#">安全远程访问</a></span> 
<span>-<a href="#">密码设置</a></span> 
<span>-<a href="#">系统更新</a></span> 
<span>-<a href="#">系统备份</a></span> 
<span>-<a href="#">系统恢复</a></span> 
<span>-<a href="#">主机控制</a></span> 
</div></div> 
</body> 
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

仿windows xp左侧菜单伸缩效果js特效

相关文章

精彩推荐