单元9 设计页面类网页特效

单元9设计页面类网页特效JavaScript+jQuery网页特效设计任务驱动教程（第2版）名校名师精品系列教材人民邮电出版社学会设计页面类网页特效正确使用Cookie正确区分jQuery对象和DOM对象教学目标pedagogicalobjectives目录导航任务9-1实现页面换肤网页特效任务9-3根据屏幕宽度自动设置网页背景和导航栏任务9-5下拉窗口的打开与自动隐藏任务9-6滚动屏幕时隐藏或显示“返回顶部”导航栏任务9-2根据日期特征动态切换背景任务9-4页面快捷导航菜单的显示与隐藏任务9-7选购商品时打开购物车页面任务9-8动态切换页面背景与调整页面大小任务9-9浮动框架的高度自适应页面内容的高度任务9-10随着屏幕高度变化隐藏或显示“返回顶部”导航栏任务9-1实现页面换肤网页特效网页0901.html的页面外观效果如图1所示，单击右上角的颜色按钮可以动态改变页面的颜色设置，即实现页面换肤。图1网页0901.html的页面外观效果网页0901.html中页面换肤主要应用的CSS代码如表所示。序号程序代码010203040506070809<styletype="text/css"id="indexSkin">a{color:#053E76;}a:hover{color:red;}.boder1-t{border-top:1pxsolid#AACCEE;}.boder1-tx{border-top:1pxdashed#AACCEE;}.boder1-l{border-left:1pxsolid#AACCEE;}.boder1-r{border-right:1pxsolid#AACCEE;}.boder1-b{border-bottom:1pxsolid#AACCEE;}.boder1{border:1pxsolid#AACCEE;}任务9-1实现页面换肤网页特效序号程序代码1011121314151617181920212223242526.boder2-t{border-top:2pxsolid#6293BE;}.boder2-l{border-left:2pxsolid#6293BE;}.boder2-r{border-right:2pxsolid#6293BE;}.boder2-b{border-bottom:2pxsolid#6293BE;}.boder2{border:2pxsolid#6293BE;}.boder-r-w{border-right-color:#FFFFFF;}.boder-b-c{border-bottom-color:#AACCEE;}.back-color{background-color:#F3FAFF;}.back-color2{background-color:#ECF7FF;}.back-color3{background-color:#FFFFFF;}.color1{color:#07519A;}.color2{color:#044691;}.back-image{background-image:url(images/skin/blue_bg.png);background-repeat:no-repeat;}</style>任务9-1实现页面换肤网页特效网页0901.html中页面换肤对应的HTML代码如表所示。序号程序代码01020304050607080910111213141516171819<divid="skin"><divstyle="width:960px;margin:0auto;"><divid="skin-left"></div><divid="skin-right"><spanclass="skinclearfix"><aclass="blue"onClick="changeSkinByColor(1);"id="skin01"><imgalt=""id="skinImg1"src="images/k.gif"/></a><aclass="green"onClick="changeSkinByColor(2);"id="skin02"><imgalt=""id="skinImg2"src="images/k.gif"/></a><aclass="orange"onClick="changeSkinByColor(3);"id="skin03"><imgalt=""id="skinImg3"src="images/k.gif"/></a><aclass="purple"onClick="changeSkinByColor(4);"id="skin04"><imgalt=""id="skinImg4"src="images/k.gif"/></a><aclass="pink"onClick="changeSkinByColor(5);"id="skin05"><imgalt=""id="skinImg5"src="images/k.gif"/></a><aclass="darkgreen"onClick="changeSkinByColor(6);"id="skin06"><imgalt=""id="skinImg6"src="images/k.gif"/></a></span></div>任务9-1实现页面换肤网页特效序号程序代码202122232425262728293031323334353637</div></div><divid="skinWrap"class="skin-wrap"></div><divid="header"><divclass="content"><divclass="tab"><spanclass="tiaoc"></span><divid="searchTab"><divid="searchTab2"><span><imgid="safesearch"src="images/k.gif"width="81"height="20"/></span><strongid="web_page"class="back-colorboder1-tboder1-lboder1-rbStyle">网页</strong></div></div></div><divclass="searchBoxboder1back-color"id="searchBox"></div></div></div>任务9-1实现页面换肤网页特效为实现网页0901.html中页面换肤而定义的index_skin0、index_skin1、skins等数组以及skinCssOld、skinCssNew、skinCookie等变量的JavaScript代码如表所示。序号程序代码010203040506070809101112131415161718192021varindex_skin0=[{color1:'053E76',color2:'044691',b1Color:'AACCEE',b2Color:'6293BE',brw:'FFF’,backColor1:'F3FAFF',backColor2:'ECF7FF',backColor3:'FFF’,backImage:'images/skin/blue_bg.png'},{color1:'333333',color2:'333333',b1Color:'C3DFAF',b2Color:'C3DFAF',brw:'FFF’,backColor1:'FBFEF3',backColor2:'F6FEF3',backColor3:'FFF’,backImage:'images/skin/green_bg.png'},{color1:'333333',color2:'333333',b1Color:'D7B89C',b2Color:'D7B89C',brw:'FFF’,backColor1:'FFFCF9',backColor2:'FDF8F4',backColor3:'FFF’,backImage:'images/skin/orange_bg.png'},{color1:'333333',color2:'333333',b1Color:'D1C0EA',b2Color:'D1C0EA',brw:'FFF’,backColor1:'FCFAFF',backColor2:'F6F3FC',backColor3:'FFF’,backImage:'images/skin/purple_bg.png'},{color1:'333333',color2:'333333',b1Color:'FFE2EA',b2Color:'FFE2EA',brw:'FFF’,backColor1:'FFFBFC',backColor2:'FFF4F8',backColor3:'FFF’,backImage:'images/skin/pink_bg.png'},{color1:'333333',color2:'333333',b1Color:'6CBB2A',b2Color:'C3DFAF',brw:'FFF’,backColor1:'FBFEF3',backColor2:'F5FCEC',backColor3:'FFF’,backImage:'images/skin/darkgreen_bg.png'}];任务9-1实现页面换肤网页特效序号程序代码22232425262728293031323334353637383940414243444546varindex_skin1=[{color1:'053E76',color2:'044691',b1Color:'AACCEE',b2Color:'6293BE',brw:'FFF’,backColor1:'F3FAFF',backColor2:'ECF7FF',backColor3:'FFF’,backImage:'images/skin/blue_bg.png’},{color1:'333333',color2:'333333',b1Color:'FFCD6D',b2Color:'FFCD6D',brw:'FFF’,backColor1:'FFFDEC',backColor2:'FFFDEC',backColor3:'FFF’,backImage:'images/skin/garfieldInnerBg.jpg'},{color1:'333333',color2:'333333',b1Color:'D7B89C',b2Color:'D7B89C',brw:'FFF’,backColor1:'FDF8F4',backColor2:'FDF8F4',backColor3:'FFF’,backImage:'images/skin/orangepic_bg.jpg'},{color1:'333333',color2:'333333',b1Color:'D1C0EA',b2Color:'D1C0EA',brw:'FFF’,backColor1:'F6F3FC',backColor2:'F6F3FC',backColor3:'FFF’,backImage:'images/skin/purplepic_bg.jpg'},{color1:'333333',color2:'333333',b1Color:'FFE2EA',b2Color:'FFE2EA',brw:'FFF’,backColor1:'FFFBFC',backColor2:'FFF4F8',backColor3:'FFF’,backImage:'images/skin/pinkpic_bg.jpg'},{color1:'333333',color2:'333333',b1Color:'6CBB2A',b2Color:'6CBB2A',brw:'FFF’,backColor1:'F5FCEC',backColor2:'F5FCEC',backColor3:'FFF’,backImage:'images/skin/darkgreenpic_bg.jpg'}];varskins=['blue','green','orange','purple','pink','darkgreen'];varskinCssOld=1;varskinCssNew=1;varskinCookie='HaoRisingCnSkin';任务9-1实现页面换肤网页特效网页0901.html中自定义函数cssValue()的代码如表所示，该函数用于设置与返回样式定义。序号程序代码01020304050607080910111213141516171819202122232425functioncssValue(index_skin){varcss=[],i=0;css[i++]='a{color:#'+index_skin.color1+';}’;css[i++]='a:hover{color:red;}’;css[i++]='.boder1-t{border-top:1pxsolid#'+index_skin.b1Color+';}’;css[i++]='.boder1-tx{border-top:1pxdashed#'+index_skin.b1Color+';}’;css[i++]='.boder1-l{border-left:1pxsolid#'+index_skin.b1Color+';}’;css[i++]='.boder1-r{border-right:1pxsolid#'+index_skin.b1Color+';}’;css[i++]='.boder1-b{border-bottom:1pxsolid#'+index_skin.b1Color+';}’;css[i++]='.boder1{border:1pxsolid#'+index_skin.b1Color+';}’;css[i++]='.boder2-t{border-top:2pxsolid#'+index_skin.b2Color+';}’;css[i++]='.boder2-l{border-left:2pxsolid#'+index_skin.b2Color+';}’;css[i++]='.boder2-r{border-right:2pxsolid#'+index_skin.b2Color+';}’;css[i++]='.boder2-b{border-bottom:2pxsolid#'+index_skin.b2Color+';}’;css[i++]='.boder2{border:2pxsolid#'+index_skin.b2Color+';}’;css[i++]='.boder-r-w{border-right-color:#'+index_skin.brw+';}’;css[i++]='.boder-b-c{border-bottom-color:#'+index_skin.b1Color+';}’;css[i++]='.back-color{background-color:#'+index_skin.backColor1+';}’;css[i++]='.back-color2{background-color:#'+index_skin.backColor2+';}’;css[i++]='.back-color3{background-color:#'+index_skin.backColor3+';}’;css[i++]='.color1{color:#'+index_skin.color1+';}’;css[i++]='.color2{color:#'+index_skin.color2+';}’;css[i++]='.back-image{background-image:url('+index_skin.backImage+');}’;returncss.join('');}任务9-1实现页面换肤网页特效网页0901.html中自定义函数skinReadCookie()的代码如表所示，该函数用于获取Cookie的值，即页面颜色的设置值。序号程序代码010203040506070809101112131415161718functionskinReadCookie(){skinCssOld=1;skinCssNew=1;varallcookies=document.cookie;if(!allcookies)return;varcookie_pos=allcookies.indexOf(skinCookie);varcookie_val="";if(cookie_pos>-1){cookie_pos=cookie_pos+skinCookie.length+1;varcookie_end=allcookies.indexOf(";",cookie_pos);if(cookie_end==-1){cookie_end=allcookies.length;}cookie_val=unescape(allcookies.substring(cookie_pos,cookie_end));skinCssOld=parseInt(cookie_val);skinCssNew=skinCssOld;}}任务9-1实现页面换肤网页特效网页0901.html中自定义函数includeStyleElement()的代码如表所示，该函数用于为网页元素添加所需的样式定义。序号程序代码0102030405060708091011functionincludeStyleElement(styles,styleId){varstyle=document.createElement("style");style.id=styleId;(document.getElementsByTagName("content")[0]||document.body).appendChild(style);if(style.styleSheet){style.styleSheet.cssText=styles;}else{style.appendChild(document.createTextNode(styles));}}任务9-1实现页面换肤网页特效网页0901.html中自定义函数skinPageLoad()的代码如表所示，该函数用于调用自定义函数skinReadCookie()获取Cookie的值，调用自定义函数includeStyleElement()为网页元素设置所需的样式。序号程序代码01020304050607080910functionskinPageLoad(){skinReadCookie();if(skinCssOld<=10){includeStyleElement(cssValue(index_skin0[skinCssOld-1]),"indexSkin");document.getElementById('skin0'+skinCssOld).className=skins[skinCssOld-1]+'C’;}else{includeStyleElement(cssValue(index_skin1[skinCssOld-11]),"indexSkin");}}任务9-1实现页面换肤网页特效网页0901.html中自定义函数setSkinByColor()、skinWriteCookie()和changeSkinByColor()的代码如表所示，这些自定义函数用于动态改变页面颜色和保存当前设置的页面颜色。序号程序代码0102030405060708091011121314151617181920212223242526functionsetSkinByColor(k){varcount=skins.length;for(vari=1;i<=count;i++){if(i==k){document.getElementById('skin0'+i).className=skins[i-1]+'C’;}else{document.getElementById('skin0'+i).className=skins[i-1];}}}functionskinWriteCookie(value){varexpiration=newDate((newDate()).getTime()+365*24*60*60*1000);document.cookie=skinCookie+"="+escape(value)+";expires=“+expiration.toGMTString()+";";}functionchangeSkinByColor(k){varcount=skins.length;setSkinByColor(k);includeStyleElement(cssValue(index_skin0[k-1]),"indexSkin");skinCssNew=k;skinCssOld=k;skinWriteCookie(skinCssOld);}目录导航任务9-1实现页面换肤网页特效任务9-3根据屏幕宽度自动设置网页背景和导航栏任务9-5下拉窗口的打开与自动隐藏任务9-6滚动屏幕时隐藏或显示“返回顶部”导航栏任务9-2根据日期特征动态切换背景任务9-4页面快捷导航菜单的显示与隐藏任务9-7选购商品时打开购物车页面任务9-8动态切换页面背景与调整页面大小任务9-9浮动框架的高度自适应页面内容的高度任务9-10随着屏幕高度变化隐藏或显示“返回顶部”导航栏任务9-2根据日期特征动态切换背景网页0902.html的外观效果如图所示，该网页会根据日期特征动态切换背景。网页0902.html中设置页面内容垂直居中的自定义函数fBodyVericalAlign()以及调用该函数的JavaScript代码如表所示。序号程序代码010203040506070809101112//设置垂直居中functionfBodyVericalAlign(){varnBodyHeight=572;varnClientHeight=document.documentElement.clientHeight;if(nClientHeight>=nBodyHeight+2){varnDis=(nClientHeight-nBodyHeight)/2;document.body.style.paddingTop=nDis+'px’;}else{document.body.style.paddingTop='0px’;}}fBodyVericalAlign();任务9-2根据日期特征动态切换背景网页0902.html中定义的数组aTheme的代码如表所示，该数组的各个元素用于存储颜色值以及背景图片的路径和名称。序号程序代码01020304050607080910111213141516171819202122varaTheme=[//window-0{'bgColor’:'#9bdbcd’,'bgCnt’:'themes/120706_window_cnt0.jpg’,'mode’:[{'bgColor’:'#9bdbcd’,'bgCnt’:'themes/120706_window_cnt0.jpg’,scoreIndex:'s3'},{'bgColor’:'#ead39c’,'bgCnt’:'themes/120706_window_cnt1.jpg’,scoreIndex:'s4'},{'bgColor’:'#233162’,'bgCnt’:'themes/120706_window_cnt2.jpg’,scoreIndex:'s5’}],scoreIndex:'s3'},//winter-1{'bgSrc’:'themes/121106_winter_bg.jpg’,'bgCnt’:'themes/121112_winter_cnt.jpg’,scoreIndex:'s6'},//newyear-2{'bgSrc’:'#2d336a',任务9-2根据日期特征动态切换背景序号程序代码2324252627282930313233343536373839404142434445'bgCnt’:'themes/130101_newyear_cnt1.jpg’,'bgSrc2’:'#feeb95’,'bgCnt2’:'themes/130101_newyear_cnt2.jpg’,'light’:'themes/130101_newyear_light.jpg’,scoreIndex:'s20'},//newyear-3{'bgSrc’:'#feeb95’,'bgCnt’:'themes/130101_newyear_cnt2.jpg’,scoreIndex:'s21'},//backhome-4{'bgSrc’:'#89a2b9’,'bgCnt’:'themes/130125_backhome_cnt.jpg’,scoreIndex:'s22'},//warm-5{'bgSrc’:'#fff’,'bgCnt’:'themes/130125_warm_cnt.jpg'},//boat-6{'bgSrc’:'#fff’,'bgCnt’:'themes/130125_guoguan_cnt.jpg'},//snake-7{'bgSrc’:'themes/130204_snake_bg.jpg’,'bgCnt’:'themes/130204_snake_cnt.jpg’,'bgCnt1’:'themes/130204_snake_cnt1.jpg',任务9-2根据日期特征动态切换背景序号程序代码4647484950515253545556575859scoreIndex:'s23'},//love1-8{'bgSrc’:'#e7ebe9’,'bgCnt’:'themes/130206_love1_cnt.jpg’,scoreIndex:'s24'},//love2-9{'bgSrc’:'#e7ebe9’,'bgCnt’:'themes/130206_love2_cnt.jpg’,scoreIndex:'s25'},//love3-10{'bgSrc’:'#e7ebe9’,'bgCnt’:'themes/130206_love3_cnt.jpg’,scoreIndex:'s26'}];任务9-2根据日期特征动态切换背景网页0902.html中公用的自定义函数fRandom()、$id()、_fImgLoader()的JavaScript代码如表所示。序号程序代码0102030405060708091011121314151617181920212223//限定范围随机数functionfRandom(nLength){returnMath.floor(nLength*Math.random());}function$id(sId){returndocument.getElementById(sId);}window.aThemeTimeout=[];window.aThemeInterval=[];function_fImgLoader(imgSrc,fSuccCallBack,nTimeout){window.bImgLoaderIsLoaded=false;varoImg=document.createElement('img’);if(fSuccCallBack){oImg.onload=function(){fSuccCallBack();window.bImgLoaderIsLoaded=true;};}varnTime=0;if(nTimeout){nTime=nTimeout;}setTimeout(function(){oImg.src=imgSrc;},nTime);}任务9-2根据日期特征动态切换背景网页0902.html中改变页面主题的自定义函数fThemeChange()以及调用该函数的JavaScript代码如表所示。序号程序代码01020304050607080910111213141516171819202122functionfThemeChange(sForceNum){varoBg=$id("mainBg"),oCnt=$id("mainCnt");//重置$id('theme').innerHTML=‘’;$id('theme').style.cssText=‘’;$id('mainBg').style.cssText=‘’;$id('mainCnt').style.cssText=‘’;for(vari=0;i<aThemeTimeout.length;i++){clearTimeout(aThemeTimeout[i]);}window.aThemeTimeout=[];for(vari=0;i<aThemeInterval.length;i++){clearInterval(aThemeInterval[i]);}window.aThemeInterval=[];//时段varsHours=newDate().getHours();varb06to10=(sHours>=6&&sHours<=10);varb13to17=(sHours>=13&&sHours<=17);varb20to23=(sHours>=20&&sHours<=23);varb00to04=(sHours>=0&&sHours<=4);//roll任务9-2根据日期特征动态切换背景序号程序代码2324252627282930313233343536373839404142434445varnRandom=0;//背景图序号标识varnForRandom=fRandom(100);//回家80%、温暖10%、小船10%、新春20%nRandom=4;if(nForRandom>0&&nForRandom<=9){nRandom=5;}if(nForRandom>10&&nForRandom<=19){nRandom=6;}if(nForRandom>20&&nForRandom<=39){nRandom=7;}//春节varoDateNow=newDate();varoDateStart1=newDate(2019,1,9,0,0,0);varoDateEnd1=newDate(2019,1,18,0,0,0);if(oDateNow>=oDateStart1&&oDateNow<=oDateEnd1){nRandom=7;}//强制或随机if(sForceNum){nRandom=sForceNum;任务9-2根据日期特征动态切换背景序号程序代码46474849505152535455565758596061626364656667686970}//单图特效varoRandom=aTheme[nRandom];//窗特别处理if(nRandom==0){varnMode=2;if(b06to10){nMode=0;}if(b13to17){nMode=1;}aTheme[0].bgColor=aTheme[0].mode[nMode].bgColor;aTheme[0].bgCnt=aTheme[0].mode[nMode].bgCnt;aTheme[0].scoreIndex=aTheme[0].mode[nMode].scoreIndex;}if(aTheme[nRandom].noCommon){}//特殊处理else{//通用处理_fImgLoader(oRandom.bgCnt,function(){oCnt.style.backgroundImage='url('+oRandom.bgCnt+')’;oCnt.style.backgroundRepeat='no-repeat’;oCnt.style.backgroundPosition='centertop';});if(oRandom.bgSrc){oBg.style.backgroundColor=oRandom.bgSrc;}}任务9-2根据日期特征动态切换背景序号程序代码71727374757677787980818283if(nRandom==0){oBg.style.backgroundImage='none’;oBg.style.backgroundColor=oRandom.bgColor;}//春节if(nRandom==7){_fImgLoader(oRandom.bgCnt1,function(){$id('theme').style.background='url('+oRandom.bgCnt1+')topcenter’;},500);}}//改变页面主题fThemeChange();9.1正确使用CookieCookie存储于访问者的计算机中，用来识别用户。每当同一台计算机通过浏览器请求某个页面时，就会发送这个Cookie。可以使用JavaScript来创建和取回Cookie的值。当访问者浏览页面时，其用户名、密码或当前的日期会存储在Cookie中，当再次访问网站时，用户名、密码和日期可以从Cookie中取回，从而可以显示欢迎信息或实现自动登录功能。首先，创建一个可在Cookie变量中存储访问者姓名的函数setCookie()。functionsetCookie(c_name,value,expiredays){varexdate=newDate();exdate.setDate(exdate.getDate()+expiredays);document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());}9.1正确使用Cookie需要创建另一个函数getCookie()来检查是否已设置Cookie，如果已设置则获取相关信息。functiongetCookie(c_name){if(document.cookie.length>0){c_start=document.cookie.indexOf(c_name+"=");if(c_start!=-1){c_start=c_start+c_name.length+1;c_end=document.cookie.indexOf(";",c_start);if(c_end==-1)c_end=document.cookie.length;returnunescape(document.cookie.substring(c_start,c_end));}}return"";}9.1正确使用Cookie最后创建一个函数checkCookie()，该函数的作用是：如果Cookie已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。functioncheckCookie(){username=getCookie('username');if(username!=null&&username!=""){alert('Welcomeagain'+username+'!');}else{username=prompt('Pleaseenteryourname:',"");if(username!=null&&username!=""){setCookie('username',username,365);}}}9.2正确区分jQuery对象和DOM对象假设网页中有以下HTML代码：<divid="demo"></div>以下的JavaScript代码通过JavaScript的getElementById来获取元素节点，像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法。varobjDom=document.getElementById("demo").innerHTML;jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，只有jQuery对象才可以使用jQuery库中的方法。jQuery对象和DOM对象之间可以相互转换。对于一个DOM对象，只需要使用$()就可以把DOM对象包装起来，获取一个jQuery对象。例如，$(document.getElementById("demo"))就是一个jQuery对象，它可以使用jQuery库中的方法。9.2正确区分jQuery对象和DOM对象JavaScript检查某个元素在网页上是否存在的代码如下。if(document.getElemenById(demo)){……}jQuery检查某个元素在网页上是否存在，应该根据获取元素的长度来判断，其代码如下。if($("#demo").length>0){……}或者转化为DOM对象来判断，代码如下。if($("#demo")[0]){……}目录导航任务9-1实现页面换肤网页特效任务9-3根据屏幕宽度自动设置网页背景和导航栏任务9-5下拉窗口的打开与自动隐藏任务9-6滚动屏幕时隐藏或显示“返回顶部”导航栏任务9-2根据日期特征动态切换背景任务9-4页面快捷导航菜单的显示与隐藏任务9-7选购商品时打开购物车页面任务9-8动态切换页面背景与调整页面大小任务9-9浮动框架的高度自适应页面内容的高度任务9-10随着屏幕高度变化隐藏或显示“返回顶部”导航栏任务9-3根据屏幕宽度自动设置网页背景和导航栏网页0903.html中导航栏的部分内容和网页背景如图所示。编写代码实现根据屏幕宽度自动设置网页背景和导航栏的功能。【任务描述】根据屏幕宽度的不同设置不同的背景颜色。根据屏幕宽度的不同动态设置网页的导航栏内容。根据屏幕宽度的不同动态设置页面内容的宽度。【思路探析】任务9-3根据屏幕宽度自动设置网页背景和导航栏【特效实现】在网页0903.html中根据屏幕宽度的不同设置不同背景颜色的JavaScript代码如表所示。序号程序代码010203040506<scriptlanguage="javascript">varminsize=1210;varscreensize=screen.width;if(screensize<minsize){document.body.style.background="#abe4ff";}else{document.body.style.background="#84af53";}</script>在网页0903.html中根据屏幕宽度的不同动态设置网页导航栏内容的代码如表所示。序号程序代码0102030405060708091011<scripttype="text/javascript">functionis_narrow(){vardatanav="";varnav='<aname="nav1"href="">首页</a></li><li><aname="nav1"href="">图书</a></li><li><aname="nav1"href="">音像</a></li><li><aname="nav1"href="">服装</a></li><li><aname="nav1"href="">鞋靴</a></li><li><aname="nav1"href="">箱包</a></li><li><aname="nav1"href="">美妆</a></li><li><aname="nav1"href="">珠宝</a></li><li><aname="nav1"href=">家居</a></li><li><aname="nav1"href="">食品</a></li><li><aname="nav1"href=">酒</a></li><li><aname="nav1"href="">手机</a></li><li><aname="nav1"href="">数码</a></li><li><aname="nav1"href="">电脑</a></li><li><aname="nav1"href="">家电</a></li>';任务9-3根据屏幕宽度自动设置网页背景和导航栏序号程序代码121314151617181920212223242526272829303132if(screen.width<1210){datanav='<liclass="on">'+nav;}else{datanav='<liclass="on">'+nav+'<li><aname="nav1"href="">孕</a></li><li><aname="nav1"href="">婴</a></li><li><aname="nav1"href="">童</a></li><li><aname="nav1"href="">饰品</a></li><li><aname="nav1"href="">手表</a></li><li><aname="nav1"href="">家具</a></li<li><aname="nav1"href="">保健</a></li><li><aname="nav1"href="">运动</a><spanclass="icon_n"><imgsrc="images/icon_new_2.png"alt=""/></span></li>’;}returndatanav;}</script><divid="hd"><divclass="nav_top"><ul><script>document.write(is_narrow());</script></ul></div></div>任务9-3根据屏幕宽度自动设置网页背景和导航栏在网页0903.html中根据屏幕宽度的不同动态设置页面内容宽度的JavaScript代码如表所示。序号程序代码010203040506<scriptlanguage="javascript">if(screen.width<1210)document.getElementById("hd").style.cssText="width:960px;";elsedocument.getElementById("hd").style.cssText="width:1160px;";</script>目录导航任务9-1实现页面换肤网页特效任务9-3根据屏幕宽度自动设置网页背景和导航栏任务9-5下拉窗口的打开与自动隐藏任务9-6滚动屏幕时隐藏或显示“返回顶部”导航栏任务9-2根据日期特征动态切换背景任务9-4页面快捷导航菜单的显示与隐藏任务9-7选购商品时打开购物车页面任务9-8动态切换页面背景与调整页面大小任务9-9浮动框架的高度自适应页面内容的高度任务9-10随着屏幕高度变化隐藏或显示“返回顶部”导航栏任务9-4页面快捷导航菜单的显示与隐藏在网页0904.html中，编写代码实现以下功能。当滚动条向下滑动到一定的距离时，自动显示图1所示的快捷导航菜单。反之，当滚动条向上滑动到小于一定的距离时自动隐藏该快捷导航菜单。单击“回到顶部”超链接时返回页面顶部。在该快捷导航菜单中单击“分类导航”超链接可折叠其下方的相关内容，如图2所示。【任务描述】图1图2当打开页面时隐藏快捷导航菜单。滚动滚动条时，当滚动条向下滑动到一定的距离时应用animate()方法设置opacity属性值为show，从而显示快捷导航菜单。反之，当滚动条向上滑动到小于一定的距离时，应用animate()方法切换opacity属性值，应用css()方法设置display属性值为none，从而隐藏该快捷导航菜单。单击“回到顶部”超链接时，应用scrollTop()方法返回页面顶部。单击“分类导航”超链接时，应用css()方法设置display属性值为block或none，实现分类导航内容的显示或隐藏，同时应用addClass()方法设置样式类，应用removeClass()方法移除样式类。【思路探析】任务9-4页面快捷导航菜单的显示与隐藏【特效实现】网页0904.html中快捷导航菜单对应的HTML代码如表所示。序号程序代码01020304050607080910111213141516171819<divid="l_layout"></div><divclass="tm_kj"id="tm_kj"style="display:none;"><divclass="kj_con"><divclass="kj_con1"id="shopCarDiv"></div><divclass="kj_con2"></div><divclass="