電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目八

1、項(xiàng)目八設(shè)計(jì)與制作網(wǎng)頁(yè)的交互特效項(xiàng)目綜述 網(wǎng)頁(yè)特效的制作不是一件很難的事情,只要具備一定的JavaScript基礎(chǔ)和CSS樣式知識(shí)就可以在頁(yè)面上實(shí)現(xiàn)豐富的動(dòng)態(tài)特殊效果。本項(xiàng)目將介紹現(xiàn)今幾個(gè)比較流行的網(wǎng)頁(yè)特效制作實(shí)例(圖片放大制作、廣告圖片自動(dòng)輪換制作和浮動(dòng)廣告制作),以提高學(xué)習(xí)者的網(wǎng)頁(yè)特效制作能力。項(xiàng)目目標(biāo)能力目標(biāo)：學(xué)習(xí)完本項(xiàng)目后,學(xué)生應(yīng)當(dāng)能夠依據(jù)公司項(xiàng)目要求完成頁(yè)面的特效制作,包括:(1)結(jié)合CSS和JavaScript實(shí)現(xiàn)廣告圖片自動(dòng)輪換特效。(2)利用JavaScript實(shí)現(xiàn)浮動(dòng)廣告特效。(2)利用JavaScript實(shí)現(xiàn)懸浮客服特效。(2)利用JavaScript實(shí)現(xiàn)兩側(cè)懸浮促銷(xiāo)廣告特效

2、。知識(shí)目標(biāo)：(1)JavaScript的嵌入格式及方法。(2)JavaScript代碼的編寫(xiě)方法。(3)JavaScript函數(shù)的定義及調(diào)用。(4)CSS樣式在特效中的應(yīng)用方法。(5)JavaScript在特效中的應(yīng)用方法。Part 01任務(wù)一廣告圖片自動(dòng)輪換的制作任務(wù)引導(dǎo) 本任務(wù)的目標(biāo)是利用CSS實(shí)現(xiàn)個(gè)人網(wǎng)站首頁(yè)的廣告圖片的自動(dòng)輪換特效功能。廣告圖片自動(dòng)輪換是通過(guò)圖片的自動(dòng)切換展示出各種廣告圖片,如果要瀏覽某張圖片,可以通過(guò)點(diǎn)擊圖片跳轉(zhuǎn)到相應(yīng)的頁(yè)面,在這個(gè)頁(yè)面里除了瀏覽此圖片之外還可以瀏覽其他相關(guān)信息,這是一種形象生動(dòng)的廣告形式 。任務(wù)實(shí)施1. 添加圖片2. 添加圖片輪換功能知識(shí)分析 需要說(shuō)

3、明的是在實(shí)際使用中,JavaScript代碼在IE瀏覽器和其他，例如Firefox瀏覽器中會(huì)存在一些差異。banner輪播動(dòng)畫(huà)有時(shí)會(huì)通過(guò)其他不同代碼來(lái)完成，這也是為了增加其通用性。 1.JavaScript格式 上述圖片自動(dòng)輪換播放特效采用了JavaScript技術(shù), JavaScript使用的是成對(duì)的標(biāo)記:,這種代碼可以在網(wǎng)頁(yè)的之間或者在之間嵌入,格式如下:知識(shí)分析 2.JavaScript函數(shù) 圖片自動(dòng)輪換播放的JavaScript代碼中定義了函數(shù),分別為$(),galleryplay()和loop()。將腳本編寫(xiě)為函數(shù),就可以避免頁(yè)面載入時(shí)執(zhí)行該腳本。函數(shù)包含著一些代碼,這些代碼只能被事

4、件激活,或者說(shuō)在函數(shù)被調(diào)用時(shí)才會(huì)執(zhí)行。你可以在頁(yè)面中的任何位置調(diào)用腳本(如果函數(shù)嵌在一個(gè)外部的.js文件,那么甚至可以從其他的頁(yè)面中調(diào)用)。這里主要說(shuō)明galleryplay()這個(gè)函數(shù),該函數(shù)實(shí)現(xiàn)了廣告圖片自動(dòng)輪換功能。JavaScript中創(chuàng)建函數(shù)的語(yǔ)法如下:function 函數(shù)名(參數(shù)1,參數(shù)2,參數(shù)n)代碼知識(shí)分析 3.CSS revealtrans濾鏡 使用CSS的revealtrans濾鏡可以制作出圖片切換時(shí)的播放效果,它的書(shū)寫(xiě)格式是這樣的:Filter:revealtrans(duration=轉(zhuǎn)換的秒數(shù),transition=轉(zhuǎn)換的類(lèi)型)拓展練習(xí)1.什么是腳本語(yǔ)言 腳本語(yǔ)言包

5、含以下幾點(diǎn)含義: (1)腳本語(yǔ)言包括JavaScript、VBscript、PHP和PERL等,是一種介于HTML和C、C+、Java、C#等編程語(yǔ)言之間的語(yǔ)言,其同樣由程序代碼組成。 (2)腳本語(yǔ)言與編程語(yǔ)言有很多相似地方,其函數(shù)與編程語(yǔ)言比較相似。與編程語(yǔ)言之間最大的區(qū)別是編程語(yǔ)言的語(yǔ)法和規(guī)則更為嚴(yán)格和復(fù)雜一些。 (3)腳本語(yǔ)言一般都有相應(yīng)的腳本引擎來(lái)解釋執(zhí)行。它們一般需要解釋器才能運(yùn)行。JavaScrip、ASP、PHP、PERL都是腳本語(yǔ)言。C/C+編譯、鏈接后,可形成獨(dú)立執(zhí)行的exe文件。 (4)腳本語(yǔ)言一般都以文本形式存在,類(lèi)似于一種命令。拓展練習(xí)2.的作用 的作用是使得不支持Ja

6、vaScript的舊版本瀏覽器能忽略腳本內(nèi)容,即是對(duì)一些版本低的瀏覽器起作用,在這些老瀏覽器中不會(huì)將標(biāo)簽中的代碼作為文本顯示出來(lái),這對(duì)不支持Javascript語(yǔ)言的瀏覽器來(lái)說(shuō)是很有用的。3.JavaScript語(yǔ)句 JavaScript 語(yǔ)句是發(fā)給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。如“document.write(”Hello world“);”,這個(gè)JavaScript語(yǔ)句告訴瀏覽器向網(wǎng)頁(yè)輸出“Hello world”。通常要在每行語(yǔ)句的結(jié)尾加上一個(gè)分號(hào),大多數(shù)人都認(rèn)為這是一個(gè)好的編程習(xí)慣,而且在Web上的JavaScript案例中也常常會(huì)看到這種情況。拓展練習(xí)4.完成上

7、一項(xiàng)目拓展中的農(nóng)產(chǎn)品網(wǎng)站4張banner輪播圖效果。習(xí)題1. JavaScript的格式是怎樣的,如何定義并調(diào)用JavaScript函數(shù)?2.Math對(duì)象提供的常用函數(shù)有哪些,它們分別實(shí)現(xiàn)了什么功能?3.在圖片輪換時(shí)利用CSS的revealtrans濾鏡實(shí)現(xiàn)隨機(jī)溶解的功能。Part 02任務(wù)二浮動(dòng)廣告的制作任務(wù)引導(dǎo) 本任務(wù)的目標(biāo)是利用CSS實(shí)現(xiàn)個(gè)人網(wǎng)站首頁(yè)的浮動(dòng)廣告特效功能。具體要求:廣告在頁(yè)面上按照一定的軌跡浮動(dòng),當(dāng)鼠標(biāo)移動(dòng)到浮動(dòng)廣告上時(shí),浮動(dòng)廣告停止運(yùn)行,便于用戶(hù)詳細(xì)點(diǎn)擊查看 。任務(wù)實(shí)施1.添加浮動(dòng)廣告圖片2.實(shí)現(xiàn)廣告的浮動(dòng)知識(shí)分析 Rimifon.NewFloatAd表示JavaScri

8、pt調(diào)用了Rimifon對(duì)象的一個(gè)函數(shù)NewFloatAd,該函數(shù)用于實(shí)現(xiàn)廣告圖片的浮動(dòng),它包括兩個(gè)參數(shù),第一個(gè)是圖片路徑(images/004.jpg),第二個(gè)是圖片鏈接URL。該函數(shù)返回了一個(gè)對(duì)象ad,它是一個(gè)鏈接對(duì)象,我們可以在函數(shù)NewFloatAd的定義中分析得知。這里設(shè)置了超鏈接圖片開(kāi)始浮動(dòng)的位置,包括距離頂端(ad.style.top)和距離左邊(ad.style.left)的值,同時(shí)還設(shè)置了超鏈接圖片的大小,包括寬度(ad.Image.width)和高度(ad.Image.height)。 在這些代碼中最重要的是圖片浮動(dòng)函數(shù)的定義,即函數(shù)NewFloatAd。該函數(shù)中有幾段重要

9、的代碼需要分析。document.createElement(),它是在對(duì)象中創(chuàng)建一個(gè)對(duì)象,該函數(shù)常常要與appendChild()方法或insertBefore()方法聯(lián)合使用。其中,appendChild()方法表示在節(jié)點(diǎn)的子節(jié)點(diǎn)列表末添加新的子節(jié)點(diǎn),而insertBefore()方法表示在節(jié)點(diǎn)的子節(jié)點(diǎn)的列表任意位置插入新的節(jié)點(diǎn)。拓展練習(xí) 1.單側(cè)懸浮客服的制作 在訪問(wèn)某網(wǎng)站或者去淘寶網(wǎng)店購(gòu)物經(jīng)常會(huì)看見(jiàn)右側(cè)聯(lián)系客服的懸浮圖片隨著頁(yè)面的滾動(dòng)而始終在右側(cè)顯示。這不僅增加了頁(yè)面的美觀，而且可以方便客戶(hù)與企業(yè)客服聯(lián)系。本任務(wù)的目標(biāo)是利用CSS實(shí)現(xiàn)個(gè)人網(wǎng)站的懸浮客服的特效功能。具體要求:懸浮客服隨著頁(yè)面的滾動(dòng)始終在頁(yè)面的右上角顯示，并可以進(jìn)行關(guān)閉和查看具體下聯(lián)系方式。拓展練習(xí) 2.兩側(cè)促銷(xiāo)廣告懸