設(shè)計(jì)內(nèi)容展開與折疊類網(wǎng)頁(yè)特效

1、任務(wù)任務(wù)8-1 應(yīng)用應(yīng)用jQuery的的each和和hasClass等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開特效疊與展開特效 網(wǎng)頁(yè)網(wǎng)頁(yè)0801.html中折疊與展開網(wǎng)頁(yè)內(nèi)中折疊與展開網(wǎng)頁(yè)內(nèi)容的特效如圖容的特效如圖8-1所示，單擊所示，單擊 按鈕，即按鈕，即可折疊網(wǎng)頁(yè)內(nèi)容，單擊可折疊網(wǎng)頁(yè)內(nèi)容，單擊 按鈕，即可展按鈕，即可展開網(wǎng)頁(yè)內(nèi)容，如圖開網(wǎng)頁(yè)內(nèi)容，如圖8-2所示。所示。圖圖8-1網(wǎng)頁(yè)網(wǎng)頁(yè)0801.html中折疊與展開網(wǎng)中折疊與展開網(wǎng)頁(yè)內(nèi)容的特效頁(yè)內(nèi)容的特效圖圖8-2網(wǎng)頁(yè)網(wǎng)頁(yè)0801.html中網(wǎng)頁(yè)內(nèi)容的折中網(wǎng)頁(yè)內(nèi)容的折疊與展開效果疊與展開效果任務(wù)任務(wù)8-2 應(yīng)用應(yīng)用jQuery的的to

2、ggle和和css等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開特效疊與展開特效【知識(shí)必備】【知識(shí)必備】1瀏覽器對(duì)象模型的層次結(jié)構(gòu)瀏覽器對(duì)象模型的層次結(jié)構(gòu)（1）第一層次。）第一層次。（2）第二層次。）第二層次。（3）第三層次。）第三層次。（4）第四層次。）第四層次。 該對(duì)象常用的屬性與方法如下。該對(duì)象常用的屬性與方法如下。 （1）defaultStatus屬性：用于設(shè)置或獲取屬性：用于設(shè)置或獲取默認(rèn)的狀態(tài)欄信息。默認(rèn)的狀態(tài)欄信息。 （2）status屬性：用于設(shè)置或獲取窗口狀屬性：用于設(shè)置或獲取窗口狀態(tài)欄中的信息。態(tài)欄中的信息。 （3）self屬性：表示當(dāng)前屬性：表示當(dāng)前window

3、對(duì)象本身。對(duì)象本身。 （4）parent屬性：表示當(dāng)前窗口的父窗口。屬性：表示當(dāng)前窗口的父窗口。 （5）open（參數(shù)表）方法：打開一個(gè)具有指（參數(shù)表）方法：打開一個(gè)具有指定名稱的新窗口。定名稱的新窗口。 （6）close()方法：表示關(guān)閉當(dāng)前窗口。方法：表示關(guān)閉當(dāng)前窗口。 （7）moveTo(x , y)方法：表示移動(dòng)當(dāng)前窗口。方法：表示移動(dòng)當(dāng)前窗口。 （8）resizeTo(height , width)方法：表示調(diào)整當(dāng)方法：表示調(diào)整當(dāng)前窗口的尺寸。前窗口的尺寸。 （9）resizeBy(w , h)方法：表示窗口寬度方法：表示窗口寬度增大增大w，高度增大，高度增大h。 （10）showM

4、odalDialog()方法：在一個(gè)方法：在一個(gè)模式窗口中顯示指定的模式窗口中顯示指定的HTML文檔。文檔。 document對(duì)象常用的屬性與方法如對(duì)象常用的屬性與方法如下。下。 （1）all屬性：表示文檔中所有屬性：表示文檔中所有HTML標(biāo)標(biāo)記符的數(shù)組。記符的數(shù)組。 （2）bgColor屬性：用于獲取或設(shè)置網(wǎng)頁(yè)屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文檔的背景顏色。文檔的背景顏色。 例如，例如，document.bgColor=green; alert(document.bgColor); （3）fgColor：用于獲取或設(shè)置網(wǎng)頁(yè)文本：用于獲取或設(shè)置網(wǎng)頁(yè)文本顏色（前景色）。顏色（前景色）。 （4）linkC

5、olor屬性：用于獲取或設(shè)置未屬性：用于獲取或設(shè)置未單擊過(guò)的鏈接顏色。單擊過(guò)的鏈接顏色。 （5）alinkColor屬性：用于獲取或設(shè)置激屬性：用于獲取或設(shè)置激活鏈接的顏色?；铈溄拥念伾?（6）vlinkColor屬性：用于獲取或設(shè)置已屬性：用于獲取或設(shè)置已單擊過(guò)鏈接的顏色。單擊過(guò)鏈接的顏色。 （7）title屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文檔屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文檔的標(biāo)題，等價(jià)于的標(biāo)題，等價(jià)于HTML的的標(biāo)記。標(biāo)記。例如，例如，alert(document.title); （8）forms屬性：表示網(wǎng)頁(yè)文檔中所有表屬性：表示網(wǎng)頁(yè)文檔中所有表單的數(shù)組。單的數(shù)組。例如，例如，document.f

6、orms0。 （9）write方法：其功能是將字符或變量方法：其功能是將字符或變量值輸出到窗口。值輸出到窗口。 （10）close方法：將窗口關(guān)閉。方法：將窗口關(guān)閉。（1）width和和height屬性。屬性。（2）availWidth屬性。屬性。（3）availHeight屬性。屬性。 （1）hostname屬性：返回屬性：返回Web主機(jī)的域名。主機(jī)的域名。 （2）path屬性：返回當(dāng)前頁(yè)面的路徑和文件屬性：返回當(dāng)前頁(yè)面的路徑和文件名。名。 （3）port屬性：返回屬性：返回Web主機(jī)的端口（主機(jī)的端口（80或或443）。）。 （4）protocol屬性：返回所使用的屬性：返回所使用的Web

7、協(xié)議協(xié)議 （http:/或或https:/）。）。 （5）href屬性：設(shè)置或返回當(dāng)前頁(yè)面的屬性：設(shè)置或返回當(dāng)前頁(yè)面的URL。（6）pathname屬性：返回屬性：返回URL的路徑名。的路徑名。（7）assign()方法：加載新的文檔。方法：加載新的文檔。（8）reload()方法：重新加載當(dāng)前頁(yè)。方法：重新加載當(dāng)前頁(yè)。6history對(duì)象及其屬性和方法對(duì)象及其屬性和方法 （1）back()方法：加載歷史列表中的前一方法：加載歷史列表中的前一個(gè)個(gè)URL，這與在瀏覽器中單擊，這與在瀏覽器中單擊“后退后退”按按鈕相同。鈕相同。 （2）forward()方法：加載歷史列表中的下方法：加載歷史列表中的

8、下一個(gè)一個(gè)URL，這與在瀏覽器中單擊，這與在瀏覽器中單擊“前進(jìn)前進(jìn)”按鈕相同。按鈕相同。7navigator對(duì)象對(duì)象 各個(gè)尺寸方法對(duì)應(yīng)的值如表各個(gè)尺寸方法對(duì)應(yīng)的值如表8-6第第3列所示。列所示。尺寸方法名稱尺寸方法名稱示例代碼示例代碼代碼對(duì)應(yīng)的尺寸值代碼對(duì)應(yīng)的尺寸值width()$(#div1).width()300height()$(#div1).height()100innerWidth()$(#div1).innerWidth()320innerHeight()$(#div1).innerHeight()120outerWidth()$(#div1).outerWidth()322out

9、erHeight()$(#div1).outerHeight()122outerWidth(true)$(#div1).outerWidth(true)328outerHeight(true)$(#div1).outerHeight(true)128表表8-6jQuery常用的尺寸方法常用的尺寸方法【引導(dǎo)訓(xùn)練】【引導(dǎo)訓(xùn)練】任務(wù)任務(wù)8-3 應(yīng)用應(yīng)用DOM的的onclick事事件和件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開特效內(nèi)容折疊與展開特效 【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0803.html中折疊與展開網(wǎng)頁(yè)內(nèi)容特效中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)如圖的初始狀態(tài)如圖8-6

10、所示，單擊所示，單擊“收起收起”超鏈接超鏈接時(shí)，折疊對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖時(shí)，折疊對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖8-7所示。所示。 單擊單擊“展開展開”超鏈接時(shí)，展開對(duì)應(yīng)的網(wǎng)頁(yè)超鏈接時(shí)，展開對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容。內(nèi)容。圖圖8-6折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)圖圖8-7單擊單擊“收起收起”超鏈接時(shí)折疊對(duì)超鏈接時(shí)折疊對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容應(yīng)的網(wǎng)頁(yè)內(nèi)容【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0804.html中折疊與展開網(wǎng)頁(yè)內(nèi)容特效中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)如圖的初始狀態(tài)如圖8-8所示，單擊所示，單擊 按鈕，即可展按鈕，即可展開對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖開對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖8-9所示。所示。

11、單擊單擊 按鈕，即可隱藏對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容。按鈕，即可隱藏對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容。 【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0805.html中折疊與展開網(wǎng)頁(yè)內(nèi)容中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)如圖特效的初始狀態(tài)如圖8-10所示。所示。 單擊單擊“展開展開”超鏈接會(huì)展開隱藏的網(wǎng)超鏈接會(huì)展開隱藏的網(wǎng)頁(yè)內(nèi)容，如圖頁(yè)內(nèi)容，如圖8-11所示。此時(shí)單擊所示。此時(shí)單擊“收起收起”按鈕會(huì)折疊部分網(wǎng)頁(yè)內(nèi)容。按鈕會(huì)折疊部分網(wǎng)頁(yè)內(nèi)容。圖圖8-10網(wǎng)頁(yè)網(wǎng)頁(yè)0805.html中折疊與展開中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)圖圖8-11在網(wǎng)頁(yè)在網(wǎng)頁(yè)0805.html中展開隱藏的網(wǎng)頁(yè)內(nèi)容中展開隱藏的網(wǎng)頁(yè)內(nèi)容 【任務(wù)描

12、述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0806.html中折疊與展開網(wǎng)頁(yè)內(nèi)容中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)如圖特效的初始狀態(tài)如圖8-12所示，單擊超鏈所示，單擊超鏈接則顯示對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖接則顯示對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖8-13所示。所示。圖圖8-12網(wǎng)頁(yè)網(wǎng)頁(yè)0806.html中折疊與展開中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)圖圖8-13在網(wǎng)頁(yè)在網(wǎng)頁(yè)0806.html中單擊超鏈中單擊超鏈接顯示對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容接顯示對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容 【同步訓(xùn)練】【同步訓(xùn)練】任務(wù)任務(wù)8-7 應(yīng)用應(yīng)用DOM的的getElementById方法和方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開

13、特效折疊與展開特效 【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0807.html中折疊與展開網(wǎng)頁(yè)內(nèi)容特效中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)如圖的初始狀態(tài)如圖8-14所示，單擊超鏈接所示，單擊超鏈接“投影投影機(jī)機(jī)”時(shí)展開相應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖時(shí)展開相應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖8-15所示。所示。圖圖8-14網(wǎng)頁(yè)網(wǎng)頁(yè)0807.html中折疊與展開中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)圖圖8-15在網(wǎng)頁(yè)在網(wǎng)頁(yè)0807.html中單擊超鏈中單擊超鏈接接“投影機(jī)投影機(jī)”時(shí)展開相應(yīng)的網(wǎng)頁(yè)內(nèi)容時(shí)展開相應(yīng)的網(wǎng)頁(yè)內(nèi)容【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0808.html中折疊與展開網(wǎng)頁(yè)內(nèi)中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的

14、初始狀態(tài)如圖容特效的初始狀態(tài)如圖8-16所示，鼠標(biāo)所示，鼠標(biāo)指針指向指針指向 按鈕時(shí)，自動(dòng)顯示如圖按鈕時(shí)，自動(dòng)顯示如圖8-17所所示的庫(kù)存地區(qū)列表。示的庫(kù)存地區(qū)列表。圖圖8-16網(wǎng)頁(yè)網(wǎng)頁(yè)0808.html中折疊與展開中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)圖圖8-17網(wǎng)頁(yè)網(wǎng)頁(yè)0808.html中自動(dòng)顯示庫(kù)存地區(qū)列表中自動(dòng)顯示庫(kù)存地區(qū)列表【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0809.html中折疊與展開網(wǎng)頁(yè)內(nèi)中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)如圖容特效的初始狀態(tài)如圖8-18所示，單擊所示，單擊 按鈕時(shí)，展開隱藏的部分內(nèi)容，如圖按鈕時(shí)，展開隱藏的部分內(nèi)容，如圖8-19所示。所示。圖圖8-18網(wǎng)頁(yè)網(wǎng)頁(yè)0809.html中折疊與展開中折疊與展開網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)圖圖8-19在網(wǎng)頁(yè)在網(wǎng)頁(yè)0809.html中展開隱藏的部分內(nèi)容中展開隱藏的部分內(nèi)容 【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁(yè)網(wǎng)頁(yè)0810.html中折疊與展開網(wǎng)頁(yè)內(nèi)容