第三章

JavaScript網頁特效制作任務三

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

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

效果圖（有特效）圖1

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

通過一些特殊結構可以讓js代碼加載時，要么可以跳過一部分不加載，或者可以循環加載一段代碼。◎控制流語句

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

循環結構是程序中一種很重要的結構。其特點是，在給定條件成立時，重復執行某程序段，直到條件不成立為止。給定的條件成為循環條件，反復執行的程序段稱為循環體。JavaScript語言提供了二種不同形式的循環結構，分別是for循環結構和while循環結構。

學習資源流程控制語句獲取用戶屏幕信息addEventListener()監聽事件scroll事件◎獲取用戶屏幕信息1.window.screen對象：包含有關用戶屏幕的信息。并且window.screen對象在編寫時可以不使用window這個前綴。2.window.screen對象有哪些：（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滾動的像素屬性有哪些：（1）PageXOffset;返回文檔在窗口左上角水平滾動的像素。用法：設置或返回當前頁面相對于窗口顯示區左上角的X位置。（2）pageYOffset;返回文檔在窗口垂直方向滾動的像素。學習資源用戶屏幕信息scroll事件addEventListener()監聽事件流程控制語句◎scroll事件1.什么是scroll事件？scroll翻譯過來的意思就是滾動。在javascript中，雖然scroll事件在window對象上發生的，但它實際表示的則是頁面中相應元素的變化。2.scroll事件在本任務中的作用是什么呢？在本次任務中，用戶在瀏覽頁面時會往下瀏覽頁面，當頁面滾輪隨用戶往下滑動時，便會觸發scroll事件，從而調用If條件語句對頁面頭部位置進行判斷。學習資源scroll事件addEventListener()監聽事件用戶屏幕信息◎addEventListener（）監聽事件讓計算機等待某個事件的發生，當這個事件發生之后，對其做出一個相應行為，如等待鼠標單擊按鈕，單擊發生時打開一個新的頁面；但是你寫的監聽事件發現這件事情后，會進行阻止，讓其無法跳轉。流程控制語句語法：element.addEventListener(event,

function,

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

useCapture：可寫也可以不寫。布爾值，指定事件是否在捕獲或冒泡階段執行。考核評價班級：姓名：學號任務名稱：頁面頭部固定評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發任務￡完成￡基本完成R未完成□完成□基本完成□未完成工作過程（50%）JS特效分析能夠進行正確的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

獲取頁面元素能夠進行正確獲取頁面元素□完成□基本完成□未完成□完成□基本完成□未完成

if語句編寫能夠正確使用IF嵌套循環□完成□基本完成□未完成□完成□基本完成□未完成

事件監聽能夠正確編寫事件代碼□完成□基本完成□未完成□完成□基本完成□未完成

Window滾動像素屬性能夠正確應用window滾動像素屬性□完成□基本完成□未完成□完成□基本完成□未完成項目成果（30%）工作完整能夠按時完成任務□是□是

工作規范能按企業規范要求進行操作□是□是

成果展示能準確表達，匯報成果□是□是非技術考評（10%）態度學習態度是否端正□是□是

紀律遵守紀律□是□是

協作有交流、團隊合