您的位置:首页 > 其它

移动的导航栏的实现

2016-07-10 15:01 267 查看
Javascript:
<Script>
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;
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);
}
}
</Script>
asp.net:
//画面代码
<%@ Page language="c#" Codebehind="left.aspx.cs" AutoEventWireup="false" Inherits="WebOA.Organization.left" %>
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<title>Content</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<link href="../style/css.css" type="text/css" rel="stylesheet">
<script language="javascript" src=left.js type=text/javascript></script>
<STYLE>.cn { FONT-SIZE: 9pt; COLOR: #ffff00; FONT-FAMILY: 宋体 }
A:link { FONT-SIZE: 9pt; COLOR: blue; TEXT-DECORATION: none }
A:visited { FONT-SIZE: 9pt; COLOR: blue; TEXT-DECORATION: none }
A:hover { FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: ""; TEXT-DECORATION: none }
.header { COLOR: white }
</STYLE>
</HEAD>
<body class="bodyleft" bgColor="#85bafc" onload="MFXinitMenu()" MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="444" valign="top" width="100%" bgcolor="white" class="frame">
<table>
<tr>
<td>
<div id="MFX0" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; Z-INDEX: 2; BORDER-LEFT-COLOR: #000000; LEFT: 20px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #000000; WIDTH: 222px; BORDER-TOP-COLOR: #000000; POSITION: absolute; TOP: 10px; HEIGHT: 28px; BACKGROUND-COLOR: #cc6666; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; layer-background-color: #CC6666">
<DIV align="center">
<TABLE cellSpacing="0" borderColorDark="#568ac2" cellPadding="0" width="100%" bgColor="#010080"
borderColorLight="#ffffff" border="1">
<TBODY>
<TR>
<TD width="100%" style=" font-weight:bold; padding:3px; color:#ffffff;">
<P class="cn" align="center"><A href="Member.aspx" target="mainFrame" onclick="MFXrunMenu(0,50)"><FONT class="header">部门人员</FONT></A></P>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</div>
<div id="MFX1" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; Z-INDEX: 1; BORDER-LEFT-COLOR: #000000; LEFT: 20px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #000000; WIDTH: 222px; BORDER-TOP-COLOR: #000000; POSITION: absolute; TOP: 30px; HEIGHT: 355px; BACKGROUND-COLOR: white; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; layer-background-color: #CCCCCC">
<DIV align="left">
<table cellpadding="0" cellspacing="0" bgcolor="white">
<tr>
<td >
<iewc:TreeView id="TreeView1" style="Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: 0px" runat="server" Height="318px" Width="222px" ExpandLevel="1">
<iewc:TreeNode Text="瑞穗中国" Expanded="True">
<iewc:TreeNode Text="总行管理层" Expanded=True>
<iewc:TreeNode Text="总行长室"  ></iewc:TreeNode>
<iewc:TreeNode Text="董事会"></iewc:TreeNode>
</iewc:TreeNode>
<iewc:TreeNode Text="部" Expanded="True">
<iewc:TreeNode Text="部长室"></iewc:TreeNode>
<iewc:TreeNode Text="课"></iewc:TreeNode>
</iewc:TreeNode>
<iewc:TreeNode Text="分行" Expanded="True">
<iewc:TreeNode Text="行长室"  ></iewc:TreeNode>
</iewc:TreeNode>
</iewc:TreeNode>
</iewc:TreeView>
</td>
</tr>
</table>
</DIV>
<BR>
</div>
<div id="MFX2" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; Z-INDEX: 2; BORDER-LEFT-COLOR: #000000; LEFT: 20px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #000000; WIDTH: 222px; BORDER-TOP-COLOR: #000000; POSITION: absolute; TOP: 100px; HEIGHT: 28px; BACKGROUND-COLOR: #cc6666; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; layer-background-color: #CC6666">
<DIV align="center">
<TABLE cellSpacing="0" borderColorDark="#568ac2" cellPadding="0" width="100%" bgColor="#010080"
borderColorLight="#ffffff" border="1">
<TBODY>
<TR>
<TD width="100%" style=" font-weight:bold; padding:3px; color:#ffffff;">
<!--P class="cn" align="center"><A onclick="MFXrunMenu(2,5)"><FONT class="header">位置表一览</FONT></A></P-->
<P class="cn" align="center"><A href="seat.aspx" target="mainFrame" onclick="MFXrunMenu(2,50)"><FONT class="header">位置表</FONT></A></P>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</div>
<DIV id="MFX3" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; Z-INDEX: 1; BORDER-LEFT-COLOR: #000000; LEFT: 20px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #000000; WIDTH: 222px; BORDER-TOP-COLOR: #000000; POSITION: absolute; TOP: 120px; HEIGHT: 0px; BACKGROUND-COLOR: #cccccc; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; layer-background-color: #CCCCCC">
<DIV align="center">
</DIV>
<BR>
</DIV>
<DIV id="MFX4" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; Z-INDEX: 2; BORDER-LEFT-COLOR: #000000; LEFT: 19px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #000000; WIDTH: 222px; BORDER-TOP-COLOR: #000000; POSITION: absolute; TOP: 178px; HEIGHT: 28px; BACKGROUND-COLOR: #cc6666; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; layer-background-color: #CC6666">
<DIV align="center">
<TABLE cellSpacing="0" borderColorDark="#568ac2" cellPadding="0" width="100%" bgColor="#010080"
borderColorLight="#ffffff" border="1">
<TBODY>
<TR>
<TD width="100%" style=" font-weight:bold; padding:3px; color:#ffffff;">
<!--P class="cn" align="center"><A onclick="MFXrunMenu(4,5)"><FONT class="header">分机表一览</FONT></A></P-->
<P class="cn" align="center"><A href="phone.aspx" target="mainFrame" onclick="MFXrunMenu(4,50)"><FONT class="header">分机表</FONT></A></P>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
<DIV id="MFX5" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; Z-INDEX: 1; BORDER-LEFT-COLOR: #000000; LEFT: 19px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #000000; WIDTH: 222px; BORDER-TOP-COLOR: #000000; POSITION: absolute; TOP: 199px; HEIGHT: 0px; BACKGROUND-COLOR: #cccccc; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; layer-background-color: #CCCCCC">
<DIV align="center">
</DIV>
</DIV>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</HTML>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  导航栏