單元9 設(shè)計頁面類網(wǎng)頁特效

單元9設(shè)計頁面類網(wǎng)頁特效JavaScript+jQuery網(wǎng)頁特效設(shè)計任務(wù)驅(qū)動教程（第2版）名校名師精品系列教材人民郵電出版社學(xué)會設(shè)計頁面類網(wǎng)頁特效正確使用Cookie正確區(qū)分jQuery對象和DOM對象教學(xué)目標(biāo)pedagogicalobjectives目錄導(dǎo)航任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效任務(wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄任務(wù)9-5下拉窗口的打開與自動隱藏任務(wù)9-6滾動屏幕時隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-2根據(jù)日期特征動態(tài)切換背景任務(wù)9-4頁面快捷導(dǎo)航菜單的顯示與隱藏任務(wù)9-7選購商品時打開購物車頁面任務(wù)9-8動態(tài)切換頁面背景與調(diào)整頁面大小任務(wù)9-9浮動框架的高度自適應(yīng)頁面內(nèi)容的高度任務(wù)9-10隨著屏幕高度變化隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效網(wǎng)頁0901.html的頁面外觀效果如圖1所示，單擊右上角的顏色按鈕可以動態(tài)改變頁面的顏色設(shè)置，即實現(xiàn)頁面換膚。圖1網(wǎng)頁0901.html的頁面外觀效果網(wǎng)頁0901.html中頁面換膚主要應(yīng)用的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;}任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效序號程序代碼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>任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效網(wǎng)頁0901.html中頁面換膚對應(yīng)的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>任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效序號程序代碼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">網(wǎng)頁</strong></div></div></div><divclass="searchBoxboder1back-color"id="searchBox"></div></div></div>任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效為實現(xiàn)網(wǎng)頁0901.html中頁面換膚而定義的index_skin0、index_skin1、skins等數(shù)組以及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'}];任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效序號程序代碼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';任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效網(wǎng)頁0901.html中自定義函數(shù)cssValue()的代碼如表所示，該函數(shù)用于設(shè)置與返回樣式定義。序號程序代碼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('');}任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效網(wǎng)頁0901.html中自定義函數(shù)skinReadCookie()的代碼如表所示，該函數(shù)用于獲取Cookie的值，即頁面顏色的設(shè)置值。序號程序代碼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;}}任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效網(wǎng)頁0901.html中自定義函數(shù)includeStyleElement()的代碼如表所示，該函數(shù)用于為網(wǎng)頁元素添加所需的樣式定義。序號程序代碼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));}}任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效網(wǎng)頁0901.html中自定義函數(shù)skinPageLoad()的代碼如表所示，該函數(shù)用于調(diào)用自定義函數(shù)skinReadCookie()獲取Cookie的值，調(diào)用自定義函數(shù)includeStyleElement()為網(wǎng)頁元素設(shè)置所需的樣式。序號程序代碼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");}}任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效網(wǎng)頁0901.html中自定義函數(shù)setSkinByColor()、skinWriteCookie()和changeSkinByColor()的代碼如表所示，這些自定義函數(shù)用于動態(tài)改變頁面顏色和保存當(dāng)前設(shè)置的頁面顏色。序號程序代碼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);}目錄導(dǎo)航任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效任務(wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄任務(wù)9-5下拉窗口的打開與自動隱藏任務(wù)9-6滾動屏幕時隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-2根據(jù)日期特征動態(tài)切換背景任務(wù)9-4頁面快捷導(dǎo)航菜單的顯示與隱藏任務(wù)9-7選購商品時打開購物車頁面任務(wù)9-8動態(tài)切換頁面背景與調(diào)整頁面大小任務(wù)9-9浮動框架的高度自適應(yīng)頁面內(nèi)容的高度任務(wù)9-10隨著屏幕高度變化隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-2根據(jù)日期特征動態(tài)切換背景網(wǎng)頁0902.html的外觀效果如圖所示，該網(wǎng)頁會根據(jù)日期特征動態(tài)切換背景。網(wǎng)頁0902.html中設(shè)置頁面內(nèi)容垂直居中的自定義函數(shù)fBodyVericalAlign()以及調(diào)用該函數(shù)的JavaScript代碼如表所示。序號程序代碼010203040506070809101112//設(shè)置垂直居中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();任務(wù)9-2根據(jù)日期特征動態(tài)切換背景網(wǎng)頁0902.html中定義的數(shù)組aTheme的代碼如表所示，該數(shù)組的各個元素用于存儲顏色值以及背景圖片的路徑和名稱。序號程序代碼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',任務(wù)9-2根據(jù)日期特征動態(tài)切換背景序號程序代碼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',任務(wù)9-2根據(jù)日期特征動態(tài)切換背景序號程序代碼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'}];任務(wù)9-2根據(jù)日期特征動態(tài)切換背景網(wǎng)頁0902.html中公用的自定義函數(shù)fRandom()、$id()、_fImgLoader()的JavaScript代碼如表所示。序號程序代碼0102030405060708091011121314151617181920212223//限定范圍隨機數(shù)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);}任務(wù)9-2根據(jù)日期特征動態(tài)切換背景網(wǎng)頁0902.html中改變頁面主題的自定義函數(shù)fThemeChange()以及調(diào)用該函數(shù)的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任務(wù)9-2根據(jù)日期特征動態(tài)切換背景序號程序代碼2324252627282930313233343536373839404142434445varnRandom=0;//背景圖序號標(biāo)識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;}//春節(jié)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;任務(wù)9-2根據(jù)日期特征動態(tài)切換背景序號程序代碼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;}}任務(wù)9-2根據(jù)日期特征動態(tài)切換背景序號程序代碼71727374757677787980818283if(nRandom==0){oBg.style.backgroundImage='none’;oBg.style.backgroundColor=oRandom.bgColor;}//春節(jié)if(nRandom==7){_fImgLoader(oRandom.bgCnt1,function(){$id('theme').style.background='url('+oRandom.bgCnt1+')topcenter’;},500);}}//改變頁面主題fThemeChange();9.1正確使用CookieCookie存儲于訪問者的計算機中，用來識別用戶。每當(dāng)同一臺計算機通過瀏覽器請求某個頁面時，就會發(fā)送這個Cookie。可以使用JavaScript來創(chuàng)建和取回Cookie的值。當(dāng)訪問者瀏覽頁面時，其用戶名、密碼或當(dāng)前的日期會存儲在Cookie中，當(dāng)再次訪問網(wǎng)站時，用戶名、密碼和日期可以從Cookie中取回，從而可以顯示歡迎信息或?qū)崿F(xiàn)自動登錄功能。首先，創(chuàng)建一個可在Cookie變量中存儲訪問者姓名的函數(shù)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需要創(chuàng)建另一個函數(shù)getCookie()來檢查是否已設(shè)置Cookie，如果已設(shè)置則獲取相關(guān)信息。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最后創(chuàng)建一個函數(shù)checkCookie()，該函數(shù)的作用是：如果Cookie已設(shè)置，則顯示歡迎詞，否則顯示提示框來要求用戶輸入名字。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正確區(qū)分jQuery對象和DOM對象假設(shè)網(wǎng)頁中有以下HTML代碼：<divid="demo"></div>以下的JavaScript代碼通過JavaScript的getElementById來獲取元素節(jié)點，像這樣得到的DOM元素就是DOM對象。DOM對象可以使用JavaScript中的方法。varobjDom=document.getElementById("demo").innerHTML;jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的，只有jQuery對象才可以使用jQuery庫中的方法。jQuery對象和DOM對象之間可以相互轉(zhuǎn)換。對于一個DOM對象，只需要使用$()就可以把DOM對象包裝起來，獲取一個jQuery對象。例如，$(document.getElementById("demo"))就是一個jQuery對象，它可以使用jQuery庫中的方法。9.2正確區(qū)分jQuery對象和DOM對象JavaScript檢查某個元素在網(wǎng)頁上是否存在的代碼如下。if(document.getElemenById(demo)){……}jQuery檢查某個元素在網(wǎng)頁上是否存在，應(yīng)該根據(jù)獲取元素的長度來判斷，其代碼如下。if($("#demo").length>0){……}或者轉(zhuǎn)化為DOM對象來判斷，代碼如下。if($("#demo")[0]){……}目錄導(dǎo)航任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效任務(wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄任務(wù)9-5下拉窗口的打開與自動隱藏任務(wù)9-6滾動屏幕時隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-2根據(jù)日期特征動態(tài)切換背景任務(wù)9-4頁面快捷導(dǎo)航菜單的顯示與隱藏任務(wù)9-7選購商品時打開購物車頁面任務(wù)9-8動態(tài)切換頁面背景與調(diào)整頁面大小任務(wù)9-9浮動框架的高度自適應(yīng)頁面內(nèi)容的高度任務(wù)9-10隨著屏幕高度變化隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄網(wǎng)頁0903.html中導(dǎo)航欄的部分內(nèi)容和網(wǎng)頁背景如圖所示。編寫代碼實現(xiàn)根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄的功能?！救蝿?wù)描述】根據(jù)屏幕寬度的不同設(shè)置不同的背景顏色。根據(jù)屏幕寬度的不同動態(tài)設(shè)置網(wǎng)頁的導(dǎo)航欄內(nèi)容。根據(jù)屏幕寬度的不同動態(tài)設(shè)置頁面內(nèi)容的寬度?！舅悸诽轿觥咳蝿?wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄【特效實現(xiàn)】在網(wǎng)頁0903.html中根據(jù)屏幕寬度的不同設(shè)置不同背景顏色的JavaScript代碼如表所示。序號程序代碼010203040506<scriptlanguage="javascript">varminsize=1210;varscreensize=screen.width;if(screensize<minsize){document.body.style.background="#abe4ff";}else{document.body.style.background="#84af53";}</script>在網(wǎng)頁0903.html中根據(jù)屏幕寬度的不同動態(tài)設(shè)置網(wǎng)頁導(dǎo)航欄內(nèi)容的代碼如表所示。序號程序代碼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="">數(shù)碼</a></li><li><aname="nav1"href="">電腦</a></li><li><aname="nav1"href="">家電</a></li>';任務(wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄序號程序代碼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>任務(wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄在網(wǎng)頁0903.html中根據(jù)屏幕寬度的不同動態(tài)設(shè)置頁面內(nèi)容寬度的JavaScript代碼如表所示。序號程序代碼010203040506<scriptlanguage="javascript">if(screen.width<1210)document.getElementById("hd").style.cssText="width:960px;";elsedocument.getElementById("hd").style.cssText="width:1160px;";</script>目錄導(dǎo)航任務(wù)9-1實現(xiàn)頁面換膚網(wǎng)頁特效任務(wù)9-3根據(jù)屏幕寬度自動設(shè)置網(wǎng)頁背景和導(dǎo)航欄任務(wù)9-5下拉窗口的打開與自動隱藏任務(wù)9-6滾動屏幕時隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-2根據(jù)日期特征動態(tài)切換背景任務(wù)9-4頁面快捷導(dǎo)航菜單的顯示與隱藏任務(wù)9-7選購商品時打開購物車頁面任務(wù)9-8動態(tài)切換頁面背景與調(diào)整頁面大小任務(wù)9-9浮動框架的高度自適應(yīng)頁面內(nèi)容的高度任務(wù)9-10隨著屏幕高度變化隱藏或顯示“返回頂部”導(dǎo)航欄任務(wù)9-4頁面快捷導(dǎo)航菜單的顯示與隱藏在網(wǎng)頁0904.html中，編寫代碼實現(xiàn)以下功能。當(dāng)滾動條向下滑動到一定的距離時，自動顯示圖1所示的快捷導(dǎo)航菜單。反之，當(dāng)滾動條向上滑動到小于一定的距離時自動隱藏該快捷導(dǎo)航菜單。單擊“回到頂部”超鏈接時返回頁面頂部。在該快捷導(dǎo)航菜單中單擊“分類導(dǎo)航”超鏈接可折疊其下方的相關(guān)內(nèi)容，如圖2所示?！救蝿?wù)描述】圖1圖2當(dāng)打開頁面時隱藏快捷導(dǎo)航菜單。滾動滾動條時，當(dāng)滾動條向下滑動到一定的距離時應(yīng)用animate()方法設(shè)置opacity屬性值為show，從而顯示快捷導(dǎo)航菜單。反之，當(dāng)滾動條向上滑動到小于一定的距離時，應(yīng)用animate()方法切換opacity屬性值，應(yīng)用css()方法設(shè)置display屬性值為none，從而隱藏該快捷導(dǎo)航菜單。單擊“回到頂部”超鏈接時，應(yīng)用scrollTop()方法返回頁面頂部。單擊“分類導(dǎo)航”超鏈接時，應(yīng)用css()方法設(shè)置display屬性值為block或none，實現(xiàn)分類導(dǎo)航內(nèi)容的顯示或隱藏，同時應(yīng)用addClass()方法設(shè)置樣式類，應(yīng)用removeClass()方法移除樣式類?！舅悸诽轿觥咳蝿?wù)9-4頁面快捷導(dǎo)航菜單的顯示與隱藏【特效實現(xiàn)】網(wǎng)頁0904.html中快捷導(dǎo)航菜單對應(yīng)的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="