單元3-設(shè)計(jì)文字類網(wǎng)頁特效

單元3設(shè)計(jì)文字類網(wǎng)頁特效任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁標(biāo)題欄中的文字任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告

【知識(shí)必備】 3.1

JavaScript的循環(huán)語句

如果希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的，循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。1．while循環(huán) While循環(huán)會(huì)在指定條件為真時(shí)循環(huán)執(zhí)行代碼塊，只要指定條件為true，循環(huán)就可以一直執(zhí)行代碼。2．do…while循環(huán) do…while循環(huán)是while循環(huán)的變體，該循環(huán)在檢查條件是否為真之前會(huì)執(zhí)行一次代碼塊，然后如果條件為真的話，就重復(fù)這個(gè)循環(huán)。3．for循環(huán)

（1）表達(dá)式1。

通常使用表達(dá)式1來初始化循環(huán)中所用的變量（vari=0）。表達(dá)式1是可選的，也就是說，不使用表達(dá)式1也可以?？梢栽诒磉_(dá)式1中初始化任意（或者多個(gè)）值。

（2）表達(dá)式2。

通常表達(dá)式2用于判斷條件是否成立，表達(dá)式2同樣是可選的。如果表達(dá)式2返回true，則循環(huán)再次開始，如果返回false，則循環(huán)將結(jié)束。

（3）表達(dá)式3。

通常表達(dá)式3會(huì)增加初始變量的值。表達(dá)式3也是可選的，表達(dá)式3有多種用法。增量可以是負(fù)數(shù)（i--），或者更大（i=i+15）。4．for…in循環(huán) JavaScript的for…in語句用于循環(huán)遍歷對(duì)象的屬性，for…in循環(huán)中的代碼塊將針對(duì)每個(gè)屬性執(zhí)行一次。5．比較while循環(huán)和for循環(huán)

使用while循環(huán)來顯示num數(shù)組中的所有值。6．break語句

在單元2學(xué)習(xí)switch()語句時(shí)已經(jīng)見到過break語句，它用于跳出switch()語句。 break語句也可用于跳出循環(huán)，break語句跳出循環(huán)后，會(huì)繼續(xù)執(zhí)行該循環(huán)之后的代碼（如果有的話）。7．continue語句 Continue語句用于跳過循環(huán)中的一個(gè)迭代。

如果出現(xiàn)了指定的條件，就繼續(xù)執(zhí)行循環(huán)中的下一個(gè)迭代。8．JavaScript標(biāo)簽

可以對(duì)JavaScript語句進(jìn)行標(biāo)記，如需標(biāo)記JavaScript語句，則在標(biāo)簽名稱后加上冒號(hào)。3.2

HTMLDOM（文檔對(duì)象模型）

文檔對(duì)象模型（DocumentObjectModel,DOM）是用以訪問HTML元素的正式W3C標(biāo)準(zhǔn)，HTMLDOM定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法，通過HTMLDOM，可以訪問HTML文檔的所有元素。 HTMLDOM獨(dú)立于平臺(tái)和語言，可被任何編程語言使用，如Java、JavaScript和VBscript。1．查找HTML元素

通常，JavaScript需要操作HTML元素。

為此，必須首先找到該元素。

（1）通過id查找HTML元素。

（2）通過標(biāo)簽名查找HTML元素。

（3）通過類名找到HTML元素。

2．改變HTML元素的內(nèi)容 HTMLDOM允許JavaScript改變HTML元素的內(nèi)容，修改HTML內(nèi)容最簡(jiǎn)單的方法

是使用innerHTML屬性。3．改變HTML元素的屬性4．改變HTML元素的樣式5．創(chuàng)建新的HTML元素6．刪除已有的HTML元素3.3

JavaScript的位置與尺寸方法3.3.1網(wǎng)頁元素的寬度和高度尺寸1．瀏覽器窗口的尺寸大小和網(wǎng)頁的尺寸大小（1）innerWidth和innerHeight屬性。（2）clientWidth和clientHeight屬性。2．屏幕分辨率的高和寬 window.screen.height用于獲取屏幕分辨率的高度，window.screen.width用于獲取屏幕分辨率的寬度。3．屏幕可用工作區(qū)的高度和寬度 window.screen.availHeight用于獲取屏幕可用工作區(qū)的高度， window.screen.availWidth用于獲取屏幕可用工作區(qū)的寬度。3.3.2網(wǎng)頁元素的位置1．offsetLeft和offsetTop屬性2．scrollLeft和scrollTop屬性3．screenTop和screenLeft屬性4．getBoundingClientRect()方法3.3.3通過網(wǎng)頁元素的樣式屬性style獲取或設(shè)置元素的尺寸和位置

通過網(wǎng)頁元素的樣式屬性style可以獲取或設(shè)置元素的長度、寬度、上邊界（元素與頁面頂邊界的距離）、左邊界（元素與頁面左邊界的距離）和顏色等屬性。1.style.left2.style.pixelLeft3.style.posLeft3.4

jQuery的選擇器 jQuery的選擇器就是“選擇某個(gè)網(wǎng)頁元素，然后對(duì)其進(jìn)行某種操作”，使用jQuery的第一步，往往就是將一個(gè)選擇表達(dá)式放進(jìn)構(gòu)造函數(shù)jQuery()（簡(jiǎn)寫為$），然后得到被選中的元素。 jQuery的選擇器允許對(duì)元素組或單個(gè)元素進(jìn)行操作。 jQuery元素選擇器和屬性選擇器通過標(biāo)簽名、屬性名或內(nèi)容對(duì)HTML元素進(jìn)行選擇。 jQuery使用CSS選擇器來選取HTML元素，使用路徑表達(dá)式來選擇帶有給定屬性的元素。3.5

jQuery的鏈?zhǔn)讲僮? jQuery有一種名為鏈接（chaining）的技術(shù)，允許用戶在相同的元素上運(yùn)行多條jQuery命令，允許將所有操作連接在一起，以鏈條的形式寫出來。

鏈接是一種在同一對(duì)象上執(zhí)行多個(gè)任務(wù)的便捷方法。 jQuery會(huì)拋掉多余的空格，并按照一行長代碼來執(zhí)行上面的代碼行。

這樣的話，瀏覽器就不必多次查找相同的元素。

如需鏈接一個(gè)動(dòng)作，只需簡(jiǎn)單地把該動(dòng)作追加到之前的動(dòng)作上。

鏈?zhǔn)讲僮魇莏Query最令人稱道、最方便的地方。

它的原理在于每一步的jQuery操作，返回的都是一個(gè)jQuery對(duì)象，所以不同操作可以連在一起。3.6

jQuery的效果方法 jQuery的效果主要包括隱藏、顯示、切換、淡入淡出、滑動(dòng)和動(dòng)畫效果等。

許多jQuery函數(shù)涉及動(dòng)畫，這些函數(shù)也許會(huì)將speed或duration作為可選參數(shù)。 speed或duration參數(shù)可以設(shè)置許多不同的值，如“slow”、“fast”、“normal”或毫秒。1．實(shí)現(xiàn)頁面元素的隱藏和顯示效果（1）jQuery的hide()方法和show()方法。（2）jQuery的toggle()方法。2．實(shí)現(xiàn)頁面元素的淡入淡出效果（1）jQuery的fadeIn()方法。（2）jQuery的fadeOut()方法。（3）jQuery的fadeToggle()方法。（4）jQuery的fadeTo()方法。3．實(shí)現(xiàn)頁面元素的滑動(dòng)效果（1）jQuery的slideDown()方法。（2）jQuery的slideUp()方法。（3）jQuery的slideToggle()方法。4．實(shí)現(xiàn)頁面元素的動(dòng)畫效果（1）jQuery的animate()方法。（2）使用animate()方法操作多個(gè)屬性。（3）使用相對(duì)值實(shí)現(xiàn)動(dòng)畫效果。（4）使用預(yù)定義的值實(shí)現(xiàn)動(dòng)畫效果。（5）使用隊(duì)列功能實(shí)現(xiàn)動(dòng)畫效果。5．停止動(dòng)畫 jQuery的stop()方法用于在動(dòng)畫或效果完成前對(duì)它們進(jìn)行停止。 stop()方法適用于所有jQuery效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。6．jQuery的Callback函數(shù)

【引導(dǎo)訓(xùn)練】任務(wù)3-3JavaScript實(shí)現(xiàn)網(wǎng)頁狀態(tài)欄中的文字呈現(xiàn)打字效果

【任務(wù)描述】

讓網(wǎng)頁狀態(tài)欄中的文字呈現(xiàn)打字效果，以吸引瀏覽者的注意力。任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁文

字滾動(dòng)與等待的交替效果

【任務(wù)描述】

在網(wǎng)頁中實(shí)現(xiàn)向上滾動(dòng)網(wǎng)頁文字，并且呈現(xiàn)滾動(dòng)與等待的交替效果，其外觀效果如圖3-6所示。圖3-6網(wǎng)頁文字滾動(dòng)與等待的交替效果任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)滑過動(dòng)態(tài)改變顯示內(nèi)容及外觀效果

【任務(wù)描述】

當(dāng)鼠標(biāo)指針指向網(wǎng)頁中的公告信息時(shí)，動(dòng)態(tài)改變顯示內(nèi)容及外觀效果，其外觀效果如圖3-7所示。圖3-7鼠標(biāo)滑過動(dòng)態(tài)改變顯示內(nèi)容及外觀效果任務(wù)3-6JavaScript實(shí)現(xiàn)文本圍繞鼠標(biāo)旋轉(zhuǎn)

【任務(wù)描述】

在網(wǎng)頁中實(shí)現(xiàn)文本圍繞鼠標(biāo)旋轉(zhuǎn)的效果，如圖3-8所示。圖3-8在網(wǎng)頁中實(shí)現(xiàn)文本圍繞鼠標(biāo)旋轉(zhuǎn)的效果任務(wù)3-7jQuery實(shí)現(xiàn)網(wǎng)站動(dòng)態(tài)信息滾動(dòng)與等待的交替效果

【任務(wù)描述】

在網(wǎng)頁中實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站動(dòng)態(tài)信息，并且呈現(xiàn)滾動(dòng)與等待的交替效果。

其外觀效果如圖3-9所示。圖3-9向上滾動(dòng)網(wǎng)站動(dòng)態(tài)信息

【同步訓(xùn)練】

任