📄 有趣的仿qq面板导航菜单.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0058)http://www.ylstudy.net/skill/detail_skill.asp?skill_id=228 -->
<HTML><HEAD><TITLE>有趣的仿QQ面板导航菜单</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type><LINK
href="有趣的仿QQ面板航菜.files/study.css" rel=stylesheet type=text/css>
<SCRIPT language=JavaScript src="有趣的仿QQ面板航菜.files/font_color_set.js"></SCRIPT>
<META content="MSHTML 5.00.2919.6307" name=GENERATOR></HEAD>
<BODY bgColor=#a0a0a0 >
<DIV align=center>
<TABLE border=0 cellPadding=0 cellSpacing=0 width="97%">
<TBODY>
<TR>
<TD><FONT color=#ffffff>自定义阅读：
<SCRIPT language=JavaScript
src="有趣的仿QQ面板航菜.files/fc_set_option.js"></SCRIPT>
</FONT> </TD></TR></TBODY></TABLE>
<TABLE bgColor=#ffffff border=1 borderColorDark=#993300 borderColorLight=#993300
cellPadding=0 cellSpacing=0 style="BORDER-COLLAPSE: collapse" width="97%">
<TBODY>
<TR>
<TD align=middle>
<TABLE border=0 cellPadding=0 cellSpacing=0 width="97%">
<TBODY>
<TR>
<TD align=middle colSpan=4><BR><FONT color=#ff0000
size=3><B>有趣的仿QQ面板导航菜单</B></FONT> </TD></TR>
<TR>
<TD colSpan=3><BR> 关键字：<FONT
color=#ee0088>(js,javascript,菜单,特效)</FONT> </TD>
<TD align=right vAlign=bottom><FONT
color=#399900>此文章未评</FONT> </TD></TR>
<TR>
<TD align=middle colSpan=4>
<HR color=#000000 width="97%" height="1">
</TD></TR>
<TR>
<TD colSpan=4 id=thetd><style
type="text/css"><BR>.titleStyle{<BR>background-color:#6699CC;color:#ffffff;<BR>border-top:1px
solid
#FFFFFF;font-size:9pt;cursor:hand;<BR>}<BR>.contentStyle{<BR>background-color:#efefef;color:blue;font-size:9pt;<BR>}<BR></style><BR>然后在<BODY>模块中加入以下Javascript代码：<BR><script
language="JavaScript"><BR>var layerTop=50; //菜单顶边距<BR>var
layerLeft=50; //菜单左边距<BR>var layerWidth=140; //菜单总宽度<BR>var
titleHeight=20; //标题栏高度<BR>var contentHeight=200; //内容区高度<BR>var
stepNo=10; //移动步数，数值越大移动越慢<BR>var
itemNo=0;<BR>//建立一个名为"itemsLayer"的层，用它限制所有菜单的显示范围：<BR>document.write('<span
id=itemsLayer style="position:absolute;overflow:hidden;border:1px
solid
#008800;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');<BR>function
addItem(itemTitle,itemContent){
<BR>//这个函数准备接受菜单标题和内容的写入<BR>//新增菜单的顶点刚好在上一菜单的标题栏以下，尺寸由一开始便声明的变量决定<BR>itemHTML='<div
id=item'+itemNo+' itemIndex='+itemNo+'
style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';">'+'<table
width=100% cellspacing="0" cellpadding="0">'+'<tr><td
height='+titleHeight+' onclick=changeItem('+itemNo+')
class="titleStyle"
align=center>'+itemTitle+'</td></tr>'+'<tr><td
height='+contentHeight+'
class="contentStyle">'+itemContent+'</td></tr>
</table></div>';<BR>document.write(itemHTML);<BR>itemNo++;<BR>}<BR>//这时便可以把菜单标题和内容作为参数调用以上函数了：<BR>//你可以添加任意多项，格式参照以下几行：<BR>addItem('欢迎','<BR><center>欢迎光临清清学园！</center>');<BR>addItem('技术文章','<center><a
href="#">项目</a> <BR><BR><a
href="#">项目</a><BR><BR><a
href="#">项目</a><BR><BR><a
href="#">更多..</a></center>');<BR>addItem('script库','<center><a
href="#">项目</a> <BR><BR><a
href="#">项目</a><BR><BR><a
href="#">项目</a> <BR><BR><a
href="#">更多..</a></center>');<BR>addItem('actionscript库','<center><a
href="#">项目</a> <BR><BR><a
href="#">项目</a><BR><BR><a
href="#">项目</a> <BR><BR><a
href="#">更多..</a></center>');<BR>addItem('论坛','<center><a
href="#">项目</a> <BR><BR><a
href="#">项目</a><BR><BR><a
href="#">项目</a> <BR><BR><a
href="#">更多..</a></center>');<BR>addItem('精品赏析','<center><a
href="#">设计精品</a></center>');<BR>document.write('</span>');
//结束"itemsLayer"层<BR><BR>//下面一式计算"itemsLayer"层的高度：<BR>document.all.itemsLayer.style.height
=<BR>itemNo*titleHeight+contentHeight;<BR>//现在开始编写点击标题时移动相应的层：<BR>//初始化变量"toItemIndex"和"onItemIndex"，<BR>//它们分别用于记录"应该显示的层"和"现在显示的层":<BR>var
toItemIndex=itemNo-1;<BR>var onItemIndex=itemNo-1;<BR>var
runtimes=0; //"runtimes"用于记录层移动次数<BR>//菜单标题被点击时调用这个函数：<BR>function
changeItem(clickItemIndex){<BR>//判断相应的层应上移还是下移：<BR>toItemIndex=clickItemIndex;<BR>if(toItemIndex-onItemIndex>0)
moveUp(); else
moveDown();<BR>//一定的时间间隔后继续移动，直到移了设定的步数stepNo:<BR>runtimes++;<BR>if(runtimes>=stepNo){<BR>onItemIndex=toItemIndex;<BR>runtimes=0;}<BR>else<BR>setTimeout("changeItem(toItemIndex)",10);<BR>}<BR>//相应菜单上移：<BR>function
moveUp(){<BR>//判断应一起上移的菜单，并让它(们)每次移动contentHeight/stepNo的距离：<BR>for(i=onItemIndex+1;i<=toItemIndex;i++)<BR>eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');<BR>}<BR>//相应菜单下移：<BR>function
moveDown(){<BR>for(i=onItemIndex;i>toItemIndex;i--)<BR>eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');<BR>}<BR>changeItem(0);
//把第一个菜单作为默认显示<BR>//--><BR></script></TD></TR>
<TR>
<TD colSpan=4 height=30><FONT color=#0000ff>作者:清清学园</FONT></TD></TR>
<TR height=30>
<TD><A href="javascript:window.close()">〖关闭窗口〗</A>
<TD>
<TD align=middle>发布日期:<FONT color=#ee8800>2002-11-11
10:22:27</FONT></TD>
<TD align=right width="30%">查看次数:<FONT color=#ff0000>49</FONT>
次</TD></TR>
<TR>
<TD colSpan=3>上一篇：<A
href="http://www.ylstudy.net/skill/detail_skill.asp?skill_id=227">七彩渐变条</A>
<BR>下一篇：<A
href="http://www.ylstudy.net/skill/detail_skill.asp?skill_id=229">导航菜单完美版</A>
</TD>
<TD align=right vAlign=bottom width="20%"><A
href="http://www.ylstudy.net/commend.asp?url=http://www.ylstudy.net/skill/detail_skill.asp?skill_id=228"><IMG
alt=Commend border=0 src="有趣的仿QQ面板航菜.files/produce.gif"></A>
<A href="javascript:print()"><IMG alt=Print border=0
src="有趣的仿QQ面板航菜.files/print.gif"></A> </TD></TR>
<FORM action=../include/deal_arvalue.asp method=post name=ar_ping><INPUT
name=url type=hidden value=../skill/detail_skill.asp?skill_id=228>
<INPUT name=source type=hidden value=skill> <INPUT name=idtype
type=hidden value=skill_id> <INPUT name=id type=hidden value=228>
<TR>
<TD colSpan=4 height=30><INPUT CHECKED name=ar_value type=radio
value=1>1分 <INPUT name=ar_value type=radio value=2>2分
<INPUT name=ar_value type=radio value=3>3分 <INPUT
name=ar_value type=radio value=4>4分 <INPUT name=ar_value
type=radio value=5>5分 <INPUT id=submit1 name=submit1 style="BACKGROUND-COLOR: #99cc33; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; COLOR: #ffffff; FONT-SIZE: 9pt; HEIGHT: 18px; PADDING-BOTTOM: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 0px; PADDING-TOP: 2px; WIDTH: 50px" type=submit value="评 分">
</TD></TR></FORM></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -