?? 有趣的仿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 + -