JavaScript程序设计基础教程实训指导-10-3 实训案例名称：制作QQ页面式导航栏

实训案例名称制作QQ页面式导航栏本实例使用JavaScript制作一个类似QQ界面的网页导航栏，在网站或者B/S软件中增加这种效果的导航栏，对于增加页面的友好性是很有好处的本实例涉及JavaScript语法如下1document.all.item,通过控件的名字定位控件，item中是控件的名字2document.all.itemsLayer,用于设置所有控件层的高度、宽度等各种属性3document.write方法，用于向文档写入内容示例代码如脚本10-3所示脚本10-

3.htmlhtmlheadmeta http-equiv=Content-Type content=text/html;charset=utf-8titleJS实现QQ页面式导航v/titlestyle type=,,text/css.titleStyle{background-color:green;color:#ffffff;}.contentStyle{background-color:/stylescript language=,,JavaScriptvar layerTop=20;〃菜单顶边距var layerLeft=30;〃菜单左边距var layerWidth=140;〃菜单总宽var titleHeight=30;//标题栏高度var contentHeight=200;〃内容区高度var stepNo=10;〃移动步数，数值越大移动越慢var itemNum=O;runtimes=O;document.writediv id=itemsLayer style=position:absolute;overflow:hidden;border:1px solid#008800;；left:+layerLeft+;top:,+layerTop+,;width:,+layerWidth+;,function addltemitemTitle,itemContent{var itemHTML=m,;itemHTML+=div id=item+itemNum+itemlndex-+itemNum+,style-,position:relative;left:0;top:+；-contentHeight*itemNum+,;width:+layerWidth+;,,itemHTML+=table width=100%cellspacing=OH cellpadding=O;itemHTML+=trtd height-+titleHeight+onclick=changeltem,+itemNum+class=,titleStylealign=center,+itemTitle+/td/tr,;itemHTML+=trtd height=,+contentHeight+,class=,contentStyle,+itemContent+,/td/tr,;itemHTML+=/table/div;document.writeitemHTML;itemNum++;〃添加菜单标题和内容，可任意多项，注意格式additem导航菜单Yvcenten^QQ导航菜单〈/center〉；addltem,我的设备;〈centerxa href=#,我的Android手机/a BRBRahref=#发现新设备/aBR/center;additem大学同学？centerva h「ef=#”张**/a BRBRahref=#”王**/a BRBRahref=#”李**/a BRBRahref=#”更多..v/ax/center〉；additem高中同学,cente「va href=#”张**/a BRBRahref=#”王**/a BRBRahref=#”李**/a BRBRahref=#”更多..v/av/center;additem初中同学？vcenterva h「ef=#”张**/a BRBRahref=#”王**/a BRBRahref=#”李**/a BRBRahref=,#|£^../a/center,;additem小学同学？vcente「va href=#”张**/a BRBRahref=#”王**/a BRBRahref=#”李**/a BRBRahref=#”更多..v/av/center;document.write/div;var totalHeight=itemNum*titleHeight+contentHeight;document.all.itemsLayer.style.height=totalHeight;var toltemlndex=itemNum-1;var onltemlndex=itemNum-1;function changeltemclickltemlndex{toltemlndex=clickltemlndex;console.logchangeltemStart------------toltemlndex=+toltemlndex+-onltemlndex=+onltemlndex;iftoltemlndex-onltemlndex0{moveUp;}else{moveDown;runtimes++;ifruntimes=stepNo{onltemlndex=toltemlndex;runtimes=O;}else{setTimeoutchangeltemtoltemlndexH,10;console.logchangeltemEnd--------------toltemlndex=,+toltemlndex+,■一onltemlndex=+onltemlndex;function movellp{console.logmoveUp--------------toltemlndex=+toltemlndex+,-onltemlndex-+onltemlndex;fori=onltemlndex+1;i=toltemlndex;i++{evaldocument.all.item+i+.style.top=parselntdocument.all.item+i+,.style.top-contentHeight/stepNo;;function moveDown{console.log*moveDown--------------toltemlndex=+toltemlndex+,一一onltemlndex=,+onltemlndex;fori=onltemlndex;itoltemlndex;i-{evaldocument.all.item+i+.style.top=parselntdocument.all.item+i+.style.top+contentHeight/stepNo;;changeltemO;/script/headbody/body/html网页显示效果如图

10.3所示图

10.3QQ页面式导航栏效果。