模拟QQ菜单,还有错误,实在"编"不下去,高手过来帮着改改
wsyab 2003-10-15 04:32:52 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>模拟QQ菜单</title>
<SCRIPT LANGUAGE="JavaScript">
var div_no=5;//菜单数量
var cc=320;//菜单长度
var olddiv=4;//上次展示的菜单
var newdiv=0;//本次展示的菜单
divarray = new Array();//菜单状态,上/下
divarray[0]="up";
divarray[1]="up";
divarray[2]="up";
divarray[3]="up";
divarray[4]="up";
function movediv(thediv)
{
newdiv=parseInt(thediv);
if(divarray[thediv]=="up")
{movedown(thediv);}
else if(divarray[thediv]=="down")
{moveup(thediv);}
}
function movedown(thediv)
{
if(divarray[newdiv+1]!="down")
{
for(i=0;i<div_no;i++)
{
if(i==newdiv)//当前展示菜单内的Iframe变大
{ww=parseInt(eval("document.all.ifm"+i+".height"))+20;
eval("document.all.ifm"+i+".height = "+ww);}
if(i==olddiv)//上次展示菜单内的Iframe变小
{eval("document.all.ifm"+i+".height -= 20");}
if(i > newdiv && divarray[i] =="up")
{
eval("div"+i+".style.posTop += 20");//移动菜单位置
cccc=cc-(eval("div"+i+".offsetTop")-i*20);//剪切菜单显示
eval("div"+i+".style.clip='rect(0 100% "+cccc+" 0)'");
kkkk=eval("div"+i+".style.posTop")
if(kkkk==(cc+i*20-20))//判断是否到位,写菜单状态数组
{divarray[i]="down";
olddiv=newdiv;}
}
}
eval("setTimeout('movedown("+thediv+")',20)");
}
}
function moveup(thediv)
{
if(divarray[newdiv]!="up")
{
for(i=0;i<div_no;i++)
{
if(i==newdiv)//当前展示菜单内的Iframe变大
{ww=parseInt(eval("document.all.ifm"+i+".height"))+20;
eval("document.all.ifm"+i+".height = "+ww);}
if(i==olddiv)//上次展示菜单内的Iframe变小
{eval("document.all.ifm"+i+".height -= 20");}
if(i <= newdiv && divarray[i]=="down")
{
eval("div"+i+".style.posTop -= 20");//移动菜单位置
cccc=cc-(eval("div"+i+".offsetTop")-i*20);//剪切菜单显示
eval("div"+i+".style.clip='rect(0 100% "+cccc+" 0)'");
kkkk=eval("div"+i+".style.posTop")
if(kkkk==(i*20))//判断是否到位,写菜单状态数组
{divarray[i]="up";
olddiv=newdiv;}
}
}
eval("setTimeout('moveup("+thediv+")',20)");
}
}
</SCRIPT>
</head>
<body>
<div id="div0" style="position:absolute; left:0px; top:0px; width:100; height:0px; z-index:1">
<table width="105" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr onmouseover="this.style.cursor='hand'" onclick="movediv('0')">
<td height="18" align="center" bordercolorlight="#333333" bordercolordark="#EEEEEE"><font size="2" color="#FFFFFF">第1菜单<font color="#FF0000">0</font></font></td>
</tr>
<tr>
<td height="300" align="center" valign="top" bordercolor="#999999" bgcolor="#666666">
<IFRAME name="ifm0" src="0.htm" frameborder="0" marginwidth="0" marginheight="0" height="0" width="100"></IFRAME>
</td>
</tr>
</table>
</div>
<div id="div1" style="position:absolute; left:0px; top:20px; width:100; height:0px; z-index:2">
<table width="105" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr onmouseover="this.style.cursor='hand'" onclick="movediv('1')">
<td height="18" align="center" bordercolorlight="#333333" bordercolordark="#EEEEEE"><font size="2" color="#FFFFFF">第2菜单<font color="#FF0000">1</font></font></td>
</tr>
<tr>
<td height="300" align="center" valign="top" bordercolor="#999999" bgcolor="#666666">
<IFRAME name="ifm1" src="1.htm" frameborder="0" marginwidth="0" marginheight="0" height="0" width="100"></IFRAME>
</td>
</tr>
</table>
</div>
<div id="div2" style="position:absolute; left:0px; top:40px; width:100; height:0px; z-index:3">
<table width="105" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr onmouseover="this.style.cursor='hand'" onclick="movediv('2')">
<td height="18" align="center" bordercolorlight="#333333" bordercolordark="#EEEEEE"><font size="2" color="#FFFFFF">第3菜单<font color="#FF0000">2</font></font></td>
</tr>
<tr>
<td height="300" align="center" valign="top" bordercolor="#999999" bgcolor="#666666">
<IFRAME name="ifm2" src="2.htm" frameborder="0" marginwidth="0" marginheight="0" height="0" width="100"></IFRAME>
</td>
</tr>
</table>
</div>
<div id="div3" style="position:absolute; left:0px; top:60px; width:100; height:0px; z-index:4">
<table width="105" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr onmouseover="this.style.cursor='hand'" onclick="movediv('3')">
<td height="18" align="center" bordercolorlight="#333333" bordercolordark="#EEEEEE"><font size="2" color="#FFFFFF">第4菜单<font color="#FF0000">3</font></font></td>
</tr>
<tr>
<td height="300" align="center" valign="top" bordercolor="#999999" bgcolor="#666666">
<IFRAME name="ifm3" src="3.htm" frameborder="0" marginwidth="0" marginheight="0" height="0" width="100"></IFRAME>
</td>
</tr>
</table>
</div>
<div id="div4" style="position:absolute; left:0px; top:80px; width:100; height:0px; z-index:5">
<table width="105" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr onmouseover="this.style.cursor='hand'" onclick="movediv('4')">
<td height="18" align="center" bordercolorlight="#333333" bordercolordark="#EEEEEE"><font size="2" color="#FFFFFF">第5菜单<font color="#FF0000">4</font></font></td>
</tr>
<tr>
<td height="300" align="center" valign="top" bordercolor="#999999" bgcolor="#666666">
<IFRAME name="ifm4" src="4.htm" frameborder="0" marginwidth="0" marginheight="0" height="300" width="100"></IFRAME>
</td>
</tr>
</table>
</div>
<div id="divdd" style="position:absolute; left:0px; top:400px; width:100; height:0px; z-index:6">
<table width="105" border="1" cellspacing="0" bgcolor="#CCCCCC">
<tr onmouseover="this.style.cursor='hand'">
<td height="18" align="center" bordercolorlight="#333333" bordercolordark="#EEEEEE">
<font size="2" color="#FFFFFF"><A HREF="#">退出系统</A></font>
</td>
</tr>
</table>
</div>
</body>
</html>