第三章

JavaScript網(wǎng)頁(yè)特效制作任務(wù)三

頁(yè)面頭部固定特效制作主講：譚少謀htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實(shí)施學(xué)習(xí)資源考核評(píng)價(jià)課后拓展htmlh5imgjavascriptwebcolorhr任務(wù)情境廣西少數(shù)民族文化資源網(wǎng)是一個(gè)通過(guò)網(wǎng)站展示廣西少數(shù)民族在文化、節(jié)日、美食、古跡等方面資源的的綜合性資源類的網(wǎng)站。其中的服飾頁(yè)面頭部的內(nèi)容我們需要將其固定于頁(yè)面頂端，為了完成這個(gè)內(nèi)容就需要加入JavaScript特效。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成服飾詳情頁(yè)頭部固定制作甲方提供的設(shè)計(jì)圖

如右圖所示評(píng)判標(biāo)準(zhǔn)1.能夠正確的分析頁(yè)面特效2.能夠進(jìn)行正確的獲取頁(yè)面元素3.能夠正確的使用if循環(huán)嵌套4.能夠正確的編寫事件代碼5.能夠正確的使用Windows滾動(dòng)屬性1+X技能考核標(biāo)準(zhǔn)能正確選擇addEventListener綁定事件完成頁(yè)面特效制作作品提交要求站點(diǎn)文件夾評(píng)判標(biāo)準(zhǔn)1.能夠正確的分析頁(yè)面特效2.能夠進(jìn)行正確的獲取頁(yè)面元素3.能夠正確的使用if循環(huán)嵌套4.能夠正確的編寫事件代碼5.能夠正確的使用Windows滾動(dòng)屬性任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握querySelector（）方法獲取html中頁(yè)面頭部元素；能夠正確使用if條件語(yǔ)句嵌套判斷窗口寬度、頁(yè)面頭部位置等；能夠正確使用監(jiān)聽器與滾動(dòng)指定元素事件的用法；能夠正確使用offsetTop方法與window.screen對(duì)象從而完成頭部固定特效的制作；任務(wù)描述本任務(wù)是基于服飾詳情頁(yè)進(jìn)行JavaScript的制作。任務(wù)要求是網(wǎng)頁(yè)滑輪往上或者往下移動(dòng)時(shí)，頁(yè)面頭部?jī)?nèi)容始終保持呈現(xiàn)在頁(yè)面頂部。我們將通過(guò)完成廣西少數(shù)民族文化資源網(wǎng)中的服飾詳情頁(yè)頭部部分固定，進(jìn)一步學(xué)習(xí)如何利用JavaScript完成頭部固定特效。任務(wù)實(shí)施圖2

效果圖（有特效）圖1

效果圖（無(wú)特效）效果圖展示編寫JS特效重構(gòu)html+css找出原頁(yè)面頭部的HTML修改html找出原頁(yè)面頭部的CSS修改CSS步驟一步驟二步驟三步驟四重構(gòu)html+css操作步驟步驟六效果圖展示編寫JS特效任務(wù)實(shí)施重構(gòu)html+css鏈接外部JavaScript文件獲取頁(yè)面元素判斷位置方法獲取屏幕寬度步驟一步驟二步驟三步驟四編寫JS特效操作步驟設(shè)置監(jiān)聽事件步驟五獲取滾動(dòng)像素步驟六頁(yè)面元素固定步驟七效果圖展示重構(gòu)html+css編寫JS特效任務(wù)實(shí)施學(xué)習(xí)資源獲取用戶屏幕信息流程控制語(yǔ)句addEventListener()監(jiān)聽事件scroll事件流程控制語(yǔ)句

通過(guò)一些特殊結(jié)構(gòu)可以讓js代碼加載時(shí)，要么可以跳過(guò)一部分不加載，或者可以循環(huán)加載一段代碼。◎控制流語(yǔ)句

控制流語(yǔ)句就是控制代碼運(yùn)行的方向，分支。它里面包含了三種方法：if語(yǔ)句、if...else語(yǔ)句和switch語(yǔ)句。◎循環(huán)語(yǔ)句

循環(huán)結(jié)構(gòu)是程序中一種很重要的結(jié)構(gòu)。其特點(diǎn)是，在給定條件成立時(shí)，重復(fù)執(zhí)行某程序段，直到條件不成立為止。給定的條件成為循環(huán)條件，反復(fù)執(zhí)行的程序段稱為循環(huán)體。JavaScript語(yǔ)言提供了二種不同形式的循環(huán)結(jié)構(gòu)，分別是for循環(huán)結(jié)構(gòu)和while循環(huán)結(jié)構(gòu)。

學(xué)習(xí)資源流程控制語(yǔ)句獲取用戶屏幕信息addEventListener()監(jiān)聽事件scroll事件◎獲取用戶屏幕信息1.window.screen對(duì)象：包含有關(guān)用戶屏幕的信息。并且window.screen對(duì)象在編寫時(shí)可以不使用window這個(gè)前綴。2.window.screen對(duì)象有哪些：（1）screen.width：屏幕的寬。（2）screen.height：屏幕的高。（3）screen.availWidth：可利用的寬，等于屏幕的寬。（4）screen.availHeight：可利用的高，等于屏幕的高減去mac頂部欄或windows底部欄。（5）screenTop：瀏覽器窗口左上角到屏幕上邊緣的距離。（6）screenLeft：瀏覽器窗口左上角到屏幕左邊緣的距離。（7）screenX：等于

screenLeft。（8）screenY：等于

screenY。3.Window滾動(dòng)的像素屬性有哪些：（1）PageXOffset;返回文檔在窗口左上角水平滾動(dòng)的像素。用法：設(shè)置或返回當(dāng)前頁(yè)面相對(duì)于窗口顯示區(qū)左上角的X位置。（2）pageYOffset;返回文檔在窗口垂直方向滾動(dòng)的像素。學(xué)習(xí)資源用戶屏幕信息scroll事件addEventListener()監(jiān)聽事件流程控制語(yǔ)句◎scroll事件1.什么是scroll事件？scroll翻譯過(guò)來(lái)的意思就是滾動(dòng)。在javascript中，雖然scroll事件在window對(duì)象上發(fā)生的，但它實(shí)際表示的則是頁(yè)面中相應(yīng)元素的變化。2.scroll事件在本任務(wù)中的作用是什么呢？在本次任務(wù)中，用戶在瀏覽頁(yè)面時(shí)會(huì)往下瀏覽頁(yè)面，當(dāng)頁(yè)面滾輪隨用戶往下滑動(dòng)時(shí)，便會(huì)觸發(fā)scroll事件，從而調(diào)用If條件語(yǔ)句對(duì)頁(yè)面頭部位置進(jìn)行判斷。學(xué)習(xí)資源scroll事件addEventListener()監(jiān)聽事件用戶屏幕信息◎addEventListener（）監(jiān)聽事件讓計(jì)算機(jī)等待某個(gè)事件的發(fā)生，當(dāng)這個(gè)事件發(fā)生之后，對(duì)其做出一個(gè)相應(yīng)行為，如等待鼠標(biāo)單擊按鈕，單擊發(fā)生時(shí)打開一個(gè)新的頁(yè)面；但是你寫的監(jiān)聽事件發(fā)現(xiàn)這件事情后，會(huì)進(jìn)行阻止，讓其無(wú)法跳轉(zhuǎn)。流程控制語(yǔ)句語(yǔ)法：element.addEventListener(event,

function,

useCapture)event：必須存在。字符串，指定事件名。Function：必須存在。指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)。

useCapture：可寫也可以不寫。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。考核評(píng)價(jià)班級(jí)：姓名：學(xué)號(hào)任務(wù)名稱：頁(yè)面頭部固定評(píng)價(jià)項(xiàng)目評(píng)價(jià)標(biāo)準(zhǔn)自評(píng)情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)￡完成￡基本完成R未完成□完成□基本完成□未完成工作過(guò)程（50%）JS特效分析能夠進(jìn)行正確的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

獲取頁(yè)面元素能夠進(jìn)行正確獲取頁(yè)面元素□完成□基本完成□未完成□完成□基本完成□未完成

if語(yǔ)句編寫能夠正確使用IF嵌套循環(huán)□完成□基本完成□未完成□完成□基本完成□未完成

事件監(jiān)聽能夠正確編寫事件代碼□完成□基本完成□未完成□完成□基本完成□未完成

Window滾動(dòng)像素屬性能夠正確應(yīng)用window滾動(dòng)像素屬性□完成□基本完成□未完成□完成□基本完成□未完成項(xiàng)目成果（30%）工作完整能夠按時(shí)完成任務(wù)□是□是

工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是

成果展示能準(zhǔn)確表達(dá)，匯報(bào)成果□是□是非技術(shù)考評(píng)（10%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是

紀(jì)律遵守紀(jì)律□是□是

協(xié)作有交流、團(tuán)隊(duì)合