模拟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>
...全文
49 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
wsyab 2003-10-21
  • 打赏
  • 举报
回复
楼主的东西确实不错,不过,改变菜单项的大小后,就面目全非了。不好调节大小!
--------------------------------------------------------
var cc=320;//菜单长度
本来菜单想document.write出来的,可现在还没实现算法那

过些日子再说吧

(^_^)
一头老头 2003-10-17
  • 打赏
  • 举报
回复
楼主的东西确实不错,不过,改变菜单项的大小后,就面目全非了。不好调节大小!
一头老头 2003-10-17
  • 打赏
  • 举报
回复
就看上这个菜单了!帮你顶!!!!
wsyab 2003-10-17
  • 打赏
  • 举报
回复
==========================================================================
各位老大:

我现在就想知道我的算法那里有错误

如果上面我的script改成这样是可以运行的,

不过感觉有点白痴罢了

那位能看看啊???

帮忙改个算法

我现在要达到的目的就是滑动菜单里有个IFrame

这样做有我自己的目的

上面那些代码的确不错,不过没有对于此程序可以借鉴的地方

============================================================
把我最早贴出的程序的script改成这个就可以,只不过是个白痴的程序
:::::::::::::::::::::::::::::::::::::::
<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 && 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;}
}
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");}
}
eval("setTimeout('movedown("+thediv+")',10)");
}
else
{
eval("document.all.ifm"+newdiv+".height = 0");
eval("document.all.ifm"+olddiv+".height = 300");
}
}


function moveup(thediv)
{
if(divarray[newdiv]!="up")
{
for(i=0;i<div_no;i++)
{


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

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");}


}
eval("setTimeout('moveup("+thediv+")',10)");
}
else
{
eval("document.all.ifm"+newdiv+".height = 0");
eval("document.all.ifm"+olddiv+".height = 300");
}
}
</SCRIPT>
blueice2002 2003-10-16
  • 打赏
  • 举报
回复

<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/0037.swf" target=show_flash>男人哭吧没有罪</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/01311.swf" target=show_flash>我不够爱你</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/0010.swf" target=show_flash>忘情水</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/08151.swf" target=show_flash>你是我传说</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10262.swf" target=show_flash>缠绵</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/09243.swf" target=show_flash>天各一方</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/11011.swf" target=show_flash>烦恼星期天</a></div>
</td>
</tr>
</table>
</div>
<!--如果要添加一个子项目请拷贝一份下面的代码并放于后面。干什么,不要拷贝我了,是下面的//-->
<div id="item6body" style="position:absolute; left:0; top:348; width:90px; height:260; z-index:4; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item6head" height="20" class="headtd1" onclick="showme(item6body,this)">
<div align="center">〖第41-50首〗</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/05211.swf" show_flash >风往北吹</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/006033.swf">冰点柔情</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/12071.swf" target=show_flash>五月雪</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/004103.swf" target=show_flash>下沙</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/04211.swf" target=show_flash>落单的候鸟</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href=http://flash.qbol.net/mtv/images/02281.swf target=show_flash>愚人码头</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/0034.swf" target=show_flash>信仰</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10111.swf" target=show_flash>不会让你后悔</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/04106.swf" target=show_flash>找一个字代替</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/08291.swf" target=show_flash>我是一只小小鸟</a></div>
</td>
</tr>
</table>
</div>
<!--哎哎,别往下拷贝了,到我得上面为止了,拷贝到代码放到我后面吧
哦,对了别忘了改几个id呀,div的id,td的id,还有onclick事件中的对象id
id的规则是div中item+数字+body。td中item+数字+head
还有div的style中的top值呀,是多少,上面这个div的top加上22就是了
别忘了按照body下的提示改改mainboard的height呀。还有给教本中的objcount数量改为你现在项目的个数
别傻了,快点行动吧,要不赶不上饭点了//-->
</div>
</body></html>
blueice2002 2003-10-16
  • 打赏
  • 举报
回复

</td>
</tr>
</table>
</div>
<div id="item2body" style="position:absolute; left:0px; top:260; width:90; height:260; z-index:2; overflow: hidden">
<table width="90" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item2head" height="20" class="headtd1" onclick="showme(item2body,this)">
<div align="center">●MTV菜单●</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://cartoonfile.163.com/source/1627/brtw1.swf" show_flash >不如跳舞</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://cartoonfile.163.com/source/13748/1017.swf">我不是天使</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://cartoonfile.163.com/source/3950/wu.swf" target=show_flash>眉飞色舞</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://cartoonfile.163.com/source/14093/74167.swf" target=show_flash>独角戏</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://cartoonfile.163.com/source/402/meteorrain.swf" target=show_flash>流星雨</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://www.hbinfo.ha.cn/flash/mtv/images/04203.swf" target=show_flash>大海-张雨生</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://www.hbinfo.ha.cn/flash/mtv/images/12313.swf" target=show_flash>网络情缘</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://www.hbinfo.ha.cn/flash/mtv/images/12103.swf" target=show_flash>忘忧草-周华健</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://music.ty.sx.cn/_private/flash/xizihupan.swf" target=show_flash>西子湖畔</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://wtmouse.myrice.com/ai.swf" target=show_flash>他不爱我</a></div>
</td>
</tr>

</table>
<p class="headtd1"> </p>
</div>
<div id="item3body" style="position:absolute; left:0; top:282; width:90px; height:260; z-index:3">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item3head" height="20" class="headtd1" onclick="showme(item3body,this)">
<div align="center">■第11-20首■</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10182.swf" show_flash >梦醒了</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/004152.swf">一笑而过</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/004174.swf" target=show_flash>真心英雄</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/05094.swf" target=show_flash>抱一抱</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10153.swf" target=show_flash>神啊救救我吧</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/12133.swf" target=show_flash>没那种命</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/004261.swf" target=show_flash>无论如何</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/08153.swf" target=show_flash>想你是临睡的习惯</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/08183.swf" target=show_flash>重色轻友</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/08133.swf" target=show_flash>陌生的夜</a></div>
</td>
</tr>
</table>
</div>
<div id="item4body" style="position:absolute; left:0; top:304; width:90px; height:260; z-index:4; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item4head" height="20" class="headtd1" onclick="showme(item4body,this)">
<div align="center">〓第21-30首〓</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10123.swf" show_flash >爱一个人好难</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10171.swf">葬心</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10223.swf" target=show_flash>樱桃小丸子</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://cartoonfile.163.com/source/14093/74167.swf" target=show_flash>独角戏</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/12053.swf" target=show_flash>一千零两夜</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/0028.swf" target=show_flash>红楼梦</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/04132.swf" target=show_flash>未了情</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10173.swf" target=show_flash>青春舞曲</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/10174.swf" target=show_flash>南海姑娘</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/004232.swf" target=show_flash>寻找秘籍</a></div>
</td>
</tr>
</table>
</div>
<div id="item5body" style="position:absolute; left:0; top:326; width:90px; height:260; z-index:4; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item5head" height="20" class="headtd1" onclick="showme(item5body,this)">
<div align="center">【第31-40首】</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/11194.swf" show_flash >水手</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/08111.swf">爱无罪</a></div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="http://flash.qbol.net/mtv/images/08081.swf" target=show_flash>三万英尺</a></div>
</td>
</tr>
blueice2002 2003-10-16
  • 打赏
  • 举报
回复
<html>
<head>
<title>汉中新视听</title>
<base href="/flash/mtv/" target=show_flash >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor=#FFFFFF onload="dotransition()" >
<script language="JavaScript">
<!--
//该函数在调用过程中只需要在将要点击的单元格内的onclick事件中调用showme函数即可
//function showme(obj1, obj2)该函数主要为使点击的对象高亮度显示,并调用moveme函数,参数obj1为母体即<div>标签的id,obj2为点击对象本身
//function moveme(obj)该函数判断单元的移动,并调用相应的函数处理,obj参数为母体
//function moveup(obj,objtop)该函数使一个单元向上移动,参数obj为母体,objtop为母体的本身最高高度
//function movedown(obj,objbuttom)该函数使一个单元向下移动,参数obj为母体,objbuttom为母体的本身最低高度
var headHeight = 22;//每个标题的高度
var bodyHeight = 260;//母体高度
var objcount = 6;//项目的个数,要改变了项目的个数别忘了该这个东西
var step = 6;//移动速度(请确认可以被'bodyHeight-headHeight'整除,当前的设定可选速度为1,2,3,6,23,138)
var moving = false;//是否有移动的项目
function showme(obj1, obj2)
{
//以下循环为改变标题的背景颜色
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags("td").length;i++)
if (document.all.tags("td")[i].className.indexOf('headtd') == 0)
document.all.tags("td")[i].className = 'headtd1';
obj2.className = 'headtd2';
moveme(obj1);
}
function moveme(obj)
{
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
currenttop = parseInt(obj.style.top);
if (currenttop >= objbuttom)
{
//检验出每一个应该向上移动的层
countid = 1;
for(i=0;i<document.all.tags("div").length;i++)
if (document.all.tags("div")[i].id == 'item'+countid+'body')
{
obj = document.all.tags("div")[i];
objtop = headHeight * (countid - 1);
if (countid == idnumber)
{
moveup(obj,objtop,false);
break;
}
else
moveup(obj,objtop,true);
countid++;
}
}
else if ((currenttop <= objtop) && (idnumber < objcount))
{
//检验出每一个应该向下移动的层
idnumber++;
countid = objcount;
for(i=document.all.tags("div").length-1;i>=0;i--)
if (document.all.tags("div")[i].id == 'item'+countid+'body')
{
obj = document.all.tags("div")[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
break;
}
else
movedown(obj,objbuttom,true);
countid--;
}
}
}
function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
return;
}
moving = ismove;
}
function movedown(obj,objbuttom,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop < objbuttom)
{
obj.style.top = currenttop + step;
setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)
return;
}
moving = ismove;
}
// -->
</script>
<style type="text/css">
<!--
.headtd1 { background: #00A4E1; border: 2px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}
.headtd2 { background: #20C1FF; border: 2px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}
.bodytd { background: #99CCFF; border: 2px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt}
-->
</style>
<!--改改这个div(mainboard)的height,加一个项目当然要把它的值加22了,减一个项目当然就是减22了//-->
<div id="mainboard" style="position:absolute; left:2px; top:2px; width:90px; height:370px; z-index:3; overflow: hidden; background: #0099FF;" onclick="">
<div id="item1body" style="position:absolute; left:0; top:0; width:90px; height:260px; z-index:1; overflow: hidden">
<table width="90" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item1head" height="20" class="headtd2" onclick="showme(item1body,this)">
<div align="center">★公告栏★</div>
</td>
</tr>
<tr>
<td class="bodytd">
<script LANGUAGE="JavaScript1.1">
<!-- JavaScript ??-
messages = new Array()
messages[0] = "首先欢迎各位的大驾光临~~~~!"
messages[1] = "你是本站的第位访客~!"
messages[2] = "汉中新视听,本着快、新、优的宗旨册,给你带来最佳的视听享受。"
messages[3] = "本站是一个集影视 、音乐、FLASH动画、游戏、娱乐、聊天为一体的个人网站。"
messages[4] = "目前已成为汉中地区最大的个人网站之一。"
messages[5] = "本站没有商业网站浓厚的广告氛围。没有不堪入目的图片!"
messages[6] = "最大限度的引领你的感觉 "
messages[7] = "无须等待,与冰点抗衡,调节温度!"
messages[8] = "本站将带你进入互联网的神秘地带。"
messages[9] = "在这里,你我的距离将更近~"
messages[10] = "浓缩时尚风采,拒揽前沿精彩。"
messages[11] = "影视 、音乐、FLASH动画、游戏、娱乐、聊天,一切前沿流行资讯尽在这里! "
messages[12] = "繁杂人世的生活可曾为你增添烦恼?"
messages[13] = "远离一方嘈杂,来到这片清雅天地"
messages[14] = "这一刻,请让我们对世界说:请勿打扰!"
messages[15] = "泡上一杯绿茶,听听悠美的音乐,看看精彩的动画 。"
messages[16] = "生活就是这么美好!"
messages[17] = "你还等什么 ?"
messages[18] = "及刻点击http://hz-media.onchina.net/"
messages[19] = "将带给你一天的好心情~~~!"
messages[20] = "最后,非常感谢您的访问。"
messages[21] = "希望您以后能一如既往的支持本站的发展。谢谢~~~~!"
mescolor = new Array()
mescolor[0] = "000000"
mescolor[1] = "FF0000"
mescolor[2] = "226622"
mescolor[3] = "0000FF"
mescolor[4] = "FFFF00"
textfont = new Array()
textfont[0] = "Verdana"
textfont[1] = "Times"
textfont[2] = "Arial"
bagcolor = new Array()
bagcolor[0] = "CCCCCC"
bagcolor[1] = "Yellow"
bagcolor[2] = "CCFFFF"
bagcolor[3] = "AAEEFF"
bagcolor[4] = "CCFF88"
bagcolor[5] = "orange"
bagcolor[6] = "99AAFF"
var i_messages = 0
var timer
function randomposition(range) {
return Math.floor(range*Math.random())
}
function dotransition() {
if (document.all) {
content.filters[i_messages].apply()
content.innerHTML = "<table width=90 height=260 border=2><tr><td bgcolor="+bagcolor[randomposition(6)]+" style='color:"+mescolor[randomposition(4)]+";font-family:"+textfont[randomposition(2)]+";font-size:14px' align=center valign=middle>"+messages[i_messages]+"</td></tr></table>"
content.filters[i_messages].play()
if (i_messages >= messages.length-1) {
i_messages = 0
}
else {
i_messages++
}
}
timer = setTimeout("dotransition()",3000)
}
// - JavaScript ?- -->
</script>
<DIV id=content style="position: absolute; top:22px; left:0px; width:90px; height:260px; text-align:center; filter: revealTrans(Transition=1, Duration=3) revealTrans(Transition=2, Duration=3) revealTrans(Transition=3, Duration=2) revealTrans(Transition=4, Duration=2) revealTrans(Transition=5, Duration=1) revealTrans(Transition=6, Duration=3) revealTrans(Transition=7, Duration=2) revealTrans(Transition=8, Duration=1) revealTrans(Transition=9, Duration=3) revealTrans(Transition=10, Duration=1) revealTrans(Transition=11, Duration=2) revealTrans(Transition=12, Duration=3) revealTrans(Transition=13, Duration=1) revealTrans(Transition=14, Duration=2) revealTrans(Transition=15, Duration=3) revealTrans(Transition=16 Duration=1) revealTrans(Transition=17, Duration=2) revealTrans(Transition=18, Duration=3) revealTrans(Transition=19, Duration=1) revealTrans(Transition=20, Duration=2) revealTrans(Transition=21, Duration=3) revealTrans(Transition=22, Duration=3)"> </DIV>
<DIV id=source style="position: absolute; top22:; left:0; width:90; color: AAAAAA;text-align:center"></DIV>
<DIV id=nn style="position: absolute; top:22px; left:0x"> </DIV></td>
wsyab 2003-10-16
  • 打赏
  • 举报
回复
/ / / / / / / / / / / / / / / / /
各位老大:

可能我没把详细的要求说明白,
现在不是打算要个QQ菜单的代码,
是我自己写的不能正确运行,
内部的IFrame大小总是不能和菜单相符.
为什么??谁知道啊
各位大牛那个能看一看,到底那个地方错了~~帮忙改一下




kingdomzhf(旭日东升)
-------------------
感谢第一个回帖,
不过你改的代码还是不行,
关键就在于内部的IFrame,
我的是小了,你改的是变大了,
只是因为切割clip的缘故没有看到而已
现在要想把我的算法错误找出来,
希望仔细看看,费心了


net_lover(孟子E章)
---------------------------
五星大牛?!!!PFPF~~
你做的QQ菜单的确不错
不过要是把我的控制IFrame的代码去掉也能实现你的那些功能
那样的菜单写过,现在做的是内部有IFrame的
目前IFrame的滚动条设为可见就是要看看IFrame的效果
如果时间不忙的话,抢抢我这100分


shinaya(镜花水月)
-----------------------
^_^!!我的功能比你做的多,呵呵
没事看看,我觉得我写的注释还算详细,
目前就是内部的IFrame控制不太完美,
就当练习了,帮忙,帮忙!!
JMANYICZF 2003-10-15
  • 打赏
  • 举报
回复
我自己写了一个和你差不多的。不过没有移动效果。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<link href="anyi1.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
div {
color: #000000;
SCROLLBAR-FACE-COLOR: #6D7669;
SCROLLBAR-HIGHLIGHT-COLOR: #6D7669;
SCROLLBAR-SHADOW-COLOR: ##6D7669;
SCROLLBAR-3DLIGHT-COLOR: #6D7669;
SCROLLBAR-ARROW-COLOR: #363946;
SCROLLBAR-TRACK-COLOR: #112335;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
.NvnvDiv {
font-family: "宋体";
font-size: 12px;
font-weight: bold;
color: #000000;
}
-->
</style>
</head>

<body link="#336699" vlink="#336699" alink="#336699" leftmargin="0" topmargin="0" class="NvBody">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="250">
<table width="250" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#2D5B8A">
<tr>
<td height="" valign="top" class="NvTd1" id="td1" onClick="changeTD('td1')">
<table width="100%" height="18" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="NvTtd1" id="ttd1">用款计划管理</td></tr></table>
<div id="tdd1" style="position:absolute; width:100%; height:100%; z-index:1; overflow: auto; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: visible;" class="NvnvDiv">
<br>
 预算单位指标录入<br><br>
 预算指标审核<br><br>
 分月用款计划录入<br><br>
 分月用款度划单位领导审核<br><br>
 分月用款计划业务科初审<br><br>
 分月用款度划国库科审批<br><br></div></td></tr>
<tr>
<td height="18" valign="top" class="NvTd2" id="td2" onClick="changeTD('td2')">
<table width="100%" height="18" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="NvTtd1">支付凭证管理</td></tr></table>
<div id="tdd2" style="position:absolute; width:100%; height:100%; z-index:1; overflow: auto; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #00?0000; visibility: hidden;" class="NvnvDiv">
<br> 财政支拦支付申请书<br><br>
 财政授权支付凭证<br><br>
 支付凭证查询<br><br></div></td></tr>
<tr>
<td height="18" valign="top" class="NvTd2" id="td3" onClick="changeTD('td3')">
<table width="100%" height="18" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="NvTtd1">单位帐表查询</td></tr></table>
<div id="tdd3" style="position:absolute; width:100%; height:100%; z-index:1; overflow: auto; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden;" class="NvnvDiv">
<br> 单位用款计划申请表<br><br>
<img src="img/ar.gif" width="25" height="15"><a href="nv2.asp" target='main' onClick="parent.fr.cols='0,10,*';parent.bank.document.all.liststatus.value=0;parent.bank.document.all.arrow.src='img/left.jpg';">一级单位用款计划汇总表</a><br><br>
<img src="img/ar.gif" width="25" height="15"><a href="nv3.asp" target='main' onClick="parent.fr.cols='0,10,*';parent.bank.document.all.liststatus.value=0;parent.bank.document.all.arrow.src='img/left.jpg';">基层单位用款计划汇总表</a><br><br>
 单位用款计划结余汇总表<br><br>
 财政直接支付执行情况表<br><br>
 财政受权支付执行情况表<br><br>
 单位收支明细表<br><br>
 单位收支汇总表<br><br>
 单位资金使用情况表<br><br>
<img src="img/ar.gif" width="25" height="15"><a href="nv1.asp" target='main' onClick="parent.fr.cols='0,10,*';parent.bank.document.all.liststatus.value=0;parent.bank.document.all.arrow.src='img/left.jpg';">单位对帐单</a><br><br></div>

</td>
</tr>
<tr>
<td height="18" valign="top" class="NvTd2" id="td4" onClick="changeTD('td4')">
<table width="100%" height="18" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="NvTtd1">代理银行确认管理</td>
</tr>
</table>

<div id="tdd4" style="position:absolute; width:100%; height:100%; z-index:1; overflow: auto; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden;" class="NvnvDiv">
<br>
 财政资金申请划款凭证<br>
? <br>
 财政资金汇总清算单<br>
<br>
 财政资金清算单<br>
<br>
 退款凭证<br>
<br>
 财政授权用款计划额度通知单<br>
<br>
 财政直接支付入帐通知单<br>
<br>
 财政资金支付日(旬,月)报表<br>
<br>
</div>

</td>
</tr>
<tr>
<td height="18" valign="top" class="NvTd2" id="td5" onClick="changeTD('td5')">
<table width="100%" height="18" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="NvTtd1">人民银行清算管理</td>
</tr>
</table>

<div id="tdd5" style="position:absolute; width:100%; height:100%; z-index:1; overflow: auto; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden;" class="NvnvDiv">
<br>
 分月用款计划额度确定<br>
<br>
 清算确定<br>
<br>
 财政支出日报表<br>
<br>
 财政支出月报表<br>
<br>
</div>

</td>
</tr>
</table>
</td>
<td align="left" valign="top" bgcolor="#FFFFFF"> '</td>
</tr></table>
<script language="JScript">
function changeTD(obj){
for (i=0;i<5;i++){
if (obj == "td" + (i+1)){
b = i
// document.write("1")
}else{
document.all["td" + (i+1)].height=18
document.all["tdd" + (i+1)].style. visibility="hidden"
// document.write("0")
}
}
document.all["td" + (b+1)].height=""
document.all["tdd" + (b+1)].style.visibility="visible"
document.all["tdd" + (b+1)].style.height="100%"
document.all["tdd" + (b+1)].style.height=document.all["tdd" + (b+1)].offsetHeight-18
}
document.all["tdd1"].style.height=document.all["tdd1"].offsetHeight-18
</script>

</body>
</html>

孟子E章 2003-10-15
  • 打赏
  • 举报
回复
http://fason.nease.net/zhuanti/menu/qq.htm
kingdomzhf 2003-10-15
  • 打赏
  • 举报
回复
<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"))+40;
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>
kingdomzhf 2003-10-15
  • 打赏
  • 举报
回复
什么错
wsyab 2003-10-15
  • 打赏
  • 举报
回复
还有第5菜单内的IFrame经常过大,有最后一个菜单当着不容易发现哦!!

-_-b
wsyab 2003-10-15
  • 打赏
  • 举报
回复

刷新-->点菜单1-->点菜单3,看出问题了吧

87,922

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧