




版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第三章
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%)態度學習態度是否端正□是□是
紀律遵守紀律□是□是
協作有交流、團隊合
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論