基于jquery的端午節(jié)網(wǎng)頁設(shè)計(jì)-畢業(yè)設(shè)計(jì)

1、<p>　　本科畢業(yè)設(shè)計(jì)（論文）</p><p><b>　?。?0 屆）</b></p><p>　　題目 基于jQuery的端午節(jié)網(wǎng)頁設(shè)計(jì) . </p><p>　　學(xué)生姓名 </p><p>　　學(xué) 號

2、 </p><p>　　指導(dǎo)教師 </p><p>　　學(xué) 院 信息技術(shù)學(xué)院 </p><p>　　專 業(yè) 數(shù)字媒體藝術(shù) </p><p>　　交稿日期 </p><p>　　

3、畢業(yè)設(shè)計(jì)（論文）學(xué)術(shù)誠信聲明</p><p>　　本人鄭重聲明：所呈交的畢業(yè)設(shè)計(jì)（論文），是本人在導(dǎo)師的指導(dǎo)下，獨(dú)立進(jìn)行研究工作所取得的成果。除文中已經(jīng)注明引用的內(nèi)容外，本畢業(yè)設(shè)計(jì)（論文）不含任何其他個(gè)人或集體已經(jīng)發(fā)表或撰寫過的作品或成果。對本文的研究做出重要貢獻(xiàn)的個(gè)人和集體，均已在文中以明確方式標(biāo)明。本人完全意識到本聲明的法律結(jié)果由本人承擔(dān)。</p><p>　　作者簽名：

4、 日期： 年 月 日</p><p>　　畢業(yè)設(shè)計(jì)（論文）版權(quán)使用授權(quán)書</p><p>　　本畢業(yè)設(shè)計(jì)（論文）作者同意學(xué)校保留并向國家有關(guān)部門或機(jī)構(gòu)送交論文的復(fù)印件和電子版，允許論文被查閱和借閱。本人授權(quán)上海建橋?qū)W院可以將本畢業(yè)設(shè)計(jì)（論文）的全部或部分內(nèi)容編入有關(guān)數(shù)據(jù)庫進(jìn)行檢索，可以采用影印、縮印或掃描等復(fù)制手段保存和匯編本畢業(yè)設(shè)計(jì)

5、（論文）。</p><p>　　保 密 □，在 年解密后適用本授權(quán)書。</p><p><b>　　本論文屬于</b></p><p><b>　　不保密 □。</b></p><p>　　（請?jiān)谝陨戏娇騼?nèi)打“√”，如作者未做出選擇的情況下，按不保密處理。）</p><p&

6、gt;　　作者簽名： 指導(dǎo)教師簽名：</p><p>　　日期： 年 月 日 日期： 年 月 日</p><p>　　基于jQuery的端午節(jié)網(wǎng)頁設(shè)計(jì)</p><p><b>　　摘 要</b></p>&

7、lt;p>　　改革開放以來，隨著經(jīng)濟(jì)與科技的高速發(fā)展，外來文化入侵嚴(yán)重，外國節(jié)日愈來愈受到青少年的追捧，與之相反的是中國傳統(tǒng)節(jié)日卻備受冷落。因此，對傳統(tǒng)節(jié)日的宣傳已經(jīng)刻不容緩。端午節(jié)是中國傳統(tǒng)節(jié)日之一，有著非常豐富的節(jié)日文化。</p><p>　　當(dāng)今社會(huì)正處于信息時(shí)代，網(wǎng)絡(luò)的影響力與日俱增，而網(wǎng)站在其中更是占有相當(dāng)重要的地位。網(wǎng)站可以說成是一種溝通工具，人們可以運(yùn)用網(wǎng)站來發(fā)布自己想要公開的信息，或者利用網(wǎng)

8、站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過各種智能設(shè)備中的瀏覽器來訪問網(wǎng)站，從而獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站的宣傳作用效果顯著。</p><p>　　本文主要是介紹端午節(jié)主題網(wǎng)站的設(shè)計(jì)制作。網(wǎng)頁制作主要應(yīng)用Dreamweaver完成。</p><p>　　網(wǎng)站的的主要內(nèi)容為宣傳中國傳統(tǒng)節(jié)日之一的端午節(jié)。網(wǎng)站的前端部分由主頁、二級頁面、動(dòng)畫頁面組成。主頁為端午節(jié)的簡單說明，二級頁面將從

9、風(fēng)俗、飲食、文學(xué)等方面進(jìn)行詳細(xì)介紹，動(dòng)畫頁面則基于jQuery制作完成。jQuery是一種特殊的JavaScript庫，它能夠很輕松地使網(wǎng)頁做成動(dòng)畫效果。網(wǎng)站的交互功能包含注冊、登錄及留言功能，都由XAMPP實(shí)現(xiàn)。</p><p>　　關(guān)鍵詞：jQuery，端午節(jié)，網(wǎng)頁設(shè)計(jì)，宣傳</p><p>　　The Dragon Boat Festival web design based on

10、jQuery </p><p><b>　　Abstract</b></p><p>　　Since the reform and opening up, with the rapid development of economy and technology, the foreign culture invasion is serious, more and mor

11、e foreign festivals by the young people's pursuit, the opposite is China traditional festivals have ignored. Therefore, the traditional festival publicity is urgent. The Dragon Boat Festival is one of the traditional

12、 festivals China, has a very rich cultural festival.</p><p>　　Today's society is in the information age, the influence of the network and grow with each passing day, the site in which it is occupies a ve

13、ry important position. The site can be said to be a kind of communication tools, people can use the website to publish public information they want, or use the site to provide network services. People can visit the websi

14、te through a variety of intelligent devices in the browser, so as to obtain the information they need or enjoy the network services. The ef</p><p>　　This paper mainly introduces the design and manufacture of

15、 the Dragon Boat Festival theme website. The main application of Dreamweaver complete web pages.</p><p>　　The main content of the website for publicity of Chinese traditional festival dragon boat festival. T

16、he front part of the site from the home page, two pages, page animation. The homepage is a simple description of the Dragon Boat Festival, two pages will be introduced in detail from the aspects of diet, customs, literat

17、ure, animation is made based on the jQuery page. JQuery is a special JavaScript library, it can easily make the web made of animation. The interactive function of website includin</p><p>　　Key Words： jQuery,

18、 Dragon Boat Festival, web design, publicity</p><p><b>　　目 錄</b></p><p><b>　　引 言1</b></p><p><b>　　1 緒論2</b></p><p>　　1.1 課題背

19、景及意義2</p><p>　　1.1.1 課題背景2</p><p>　　1.1.2 課題意義3</p><p>　　1.2 課題的研究方法及預(yù)期結(jié)果3</p><p>　　1.2.1 課題的研究方法3</p><p>　　1.2.2 課題的預(yù)期結(jié)果3</p><p>　　2 制作

20、網(wǎng)站的相關(guān)工具及軟件介紹4</p><p>　　2.1 jQuery介紹4</p><p>　　2.2 Adobe Photoshop CS5軟件介紹4</p><p>　　2.3 Adobe Dreamweaver CS5軟件介紹4</p><p>　　2.4 XAMPP軟件包介紹4</p><p><

21、;b>　　3 網(wǎng)站的設(shè)計(jì)5</b></p><p>　　3.1 網(wǎng)頁內(nèi)容設(shè)計(jì)5</p><p>　　3.2 網(wǎng)頁排版設(shè)計(jì)5</p><p>　　3.3 交互功能設(shè)計(jì)6</p><p>　　3.4 動(dòng)畫設(shè)計(jì)6</p><p><b>　　4 網(wǎng)頁的制作7</b><

22、/p><p>　　4.1 建立站點(diǎn)7</p><p>　　4.2 主體框架的制作7</p><p>　　4.3 首頁及二級頁面的制作8</p><p>　　4.3.1 首頁的制作8</p><p>　　4.3.2 “風(fēng)俗”頁的制作8</p><p>　　4.3.3 “飲食”頁的制作8&l

23、t;/p><p>　　4.3.4 “詩文”頁的制作9</p><p>　　4.4 交互功能的制作9</p><p>　　4.4.1 注冊登錄的制作11</p><p>　　4.4.2 留言功能的制作12</p><p>　　4.5 動(dòng)畫頁面的制作12</p><p>　　4.5.1 頁面的

24、搭建與切換12</p><p>　　4.5.2 人物的動(dòng)作分解13</p><p>　　4.5.3 流程的編寫與封裝13</p><p>　　4.5.4 主題頁面一的制作13</p><p>　　4.5.5 主題頁面二的制作14</p><p>　　4.5.6 主題頁面三的制作16</p>&

25、lt;p>　　4.5.7 添加背景音樂18</p><p>　　4.5.8 整合工作18</p><p>　　4.5.9 技術(shù)總結(jié)18</p><p>　　4.6 整理文件夾18</p><p><b>　　5 網(wǎng)站測試19</b></p><p>　　5.1 交互功能測試19&

26、lt;/p><p>　　5.2 動(dòng)畫測試20</p><p>　　5.3 瀏覽器兼容性測試21</p><p><b>　　結(jié) 論22</b></p><p>　　參 考 文 獻(xiàn)23</p><p><b>　　致 謝24</b></p>&l

27、t;p><b>　　引 言</b></p><p>　　每年農(nóng)歷的五月初五，是中國的傳統(tǒng)佳節(jié)日——端午節(jié)。對于大多數(shù)中國人而言，端午節(jié)的重要意義應(yīng)該是僅次于春節(jié)和中秋節(jié)的。</p><p>　　一提到端午節(jié)，很容易就聯(lián)想到吃粽子、劃龍舟等傳統(tǒng)習(xí)俗。端午節(jié)的來歷有很多的說法，最普遍的說法就是為了紀(jì)念愛國詩人屈原了。屈原是戰(zhàn)國時(shí)期的楚國人，當(dāng)時(shí)秦國勢強(qiáng)而楚國勢

28、弱，他積極主張連齊抗秦，但楚王不聽從他的建議，反而聽信讒言，將屈原流放在外。后來楚國都城被秦軍攻破，屈原憂憤不已，投了汨羅江，以身殉國。傳說他投江那天正是五月初五，當(dāng)?shù)氐陌傩罩篮髠牟灰?，來回劃船到處打撈，又拿了很多飯團(tuán)丟到江里喂魚蝦，倒了很多雄黃酒去醉水怪，說是為了保護(hù)屈原大夫的尸身，這也就是端午節(jié)劃龍舟、吃粽子、喝雄黃酒的由來。</p><p>　　除了紀(jì)念屈原的說法之外，還有紀(jì)念孝女曹娥、紀(jì)念忠臣伍子胥的

29、說法。無論如何，這些傳奇故事讓端午節(jié)增添了很多色彩。端午節(jié)相對于其它的傳統(tǒng)節(jié)日就多了一份特別的意義。端午節(jié)已經(jīng)有兩千多年的歷史了，它經(jīng)歷了中華民族的朝代更替、時(shí)代變遷，但它依然在延續(xù)著。</p><p>　　然而近年來隨著外來文化的入侵，外國的一些節(jié)日如圣誕節(jié)、情人節(jié)等的影響力越來越大；而除春節(jié)之外，中國傳統(tǒng)節(jié)日的影響力越來越小。傳統(tǒng)節(jié)日不應(yīng)該就此沉默，對于傳統(tǒng)節(jié)日的宣傳保護(hù)刻不容緩。</p>&l

30、t;p>　　隨著科學(xué)技術(shù)的高速發(fā)展，互聯(lián)網(wǎng)已經(jīng)走人千家萬戶。目前來說，網(wǎng)站的宣傳力度已經(jīng)遠(yuǎn)遠(yuǎn)超過其他媒體。本次設(shè)計(jì)的任務(wù)是制作一個(gè)端午節(jié)主題網(wǎng)站，以宣傳推廣端午節(jié)文化為目的。網(wǎng)站的主要內(nèi)容是對端午節(jié)的相關(guān)知識進(jìn)行詳細(xì)介紹，網(wǎng)站的難點(diǎn)主要集中在基于jQuery制作的動(dòng)畫部分，網(wǎng)站也包含注冊、登錄以及留言等交互功能。</p><p><b>　　1 緒論</b></p>&l

31、t;p>　　1.1 課題背景及意義</p><p>　　1.1.1 課題背景</p><p>　　JavaScript是一種非常流行的腳本語言，通過使用它能讓網(wǎng)頁制作出動(dòng)態(tài)效果。但是學(xué)習(xí)JavaScript并沒有那么容易，它的腳本語句實(shí)在過于冗長、在處理跨瀏覽器的方面也很復(fù)雜、將Html與JavaScript堆砌在一起進(jìn)行先后順序的處理也是個(gè)大的難點(diǎn)?！叭藗円环矫孀非骔eb用戶體驗(yàn)，

32、一方面被JavaScript開發(fā)效率所困擾”[]。于是很多專業(yè)的高手就想建立基于JavaScript的框架來提升開發(fā)效率，正是這樣才促成了jQuery的誕生。</p><p>　　jQuery在2006年的時(shí)候正式發(fā)布，便吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開發(fā)?！癑ohn正式宣布以jQuery的名稱發(fā)布自己的程序庫。隨之而來的是jQuery的快速發(fā)展”[]

33、。</p><p>　　任何技術(shù)都需要快速地更新，在這一方面jQuery團(tuán)隊(duì)做得相當(dāng)出色，“他們讓人們很快就知道哪些功能什么時(shí)候就會(huì)更新與或淘汰”[]。隨著jQuery插件在網(wǎng)站建設(shè)過程中的使用率不斷的增加，所以“有必要跟進(jìn)時(shí)代步伐開發(fā)出一些新的插件及代碼片段，以此來鞏固并提高前端用戶體驗(yàn)，將用戶體驗(yàn)提升到一個(gè)新的高度”[]?！盀榱藵M足Web開發(fā)者不斷增長的需求，jQuery已經(jīng)遠(yuǎn)不僅僅是其核心庫”[]?！霸谖磥?/p>

34、很長一段時(shí)間，jQuery仍將處于市場的主導(dǎo)地位”[]。</p><p>　　隨著改革開放、經(jīng)濟(jì)發(fā)展以及外來文化的入侵，外國節(jié)日隨著其他外來文化一同打破了中國的大門。目前的普遍現(xiàn)象是青少年對于中國傳統(tǒng)節(jié)日的了解度及參與度越來越低，對西方節(jié)日的了解度及參與度卻越來越高。而且由于在網(wǎng)絡(luò)的宣傳及店鋪的活動(dòng)影響下，目前的發(fā)展趨勢是傳統(tǒng)節(jié)日的氛圍逐漸淡薄，而西方節(jié)日的氛圍卻日漸濃重，這將嚴(yán)重影響到我國傳統(tǒng)文化的傳承發(fā)展。因

35、此，幫助青少年樹立傳統(tǒng)節(jié)日意識已經(jīng)刻不容緩。</p><p>　　端午節(jié)是我國的傳統(tǒng)節(jié)日，因?yàn)檗r(nóng)歷五月初五在夏季，所以又被稱作“夏節(jié)”。端午節(jié)是為了紀(jì)念愛國詩人屈原，端午節(jié)那天人們會(huì)進(jìn)行吃粽子、劃龍舟等傳統(tǒng)習(xí)俗。在中國，端午節(jié)的地位僅此于春節(jié)與中秋節(jié)。韓國江陵端午祭在2005年11月25日申遺成功，由于媒體大肆地宣傳“韓國端午節(jié)”，這給國人帶來了強(qiáng)烈的心理沖擊，紛紛表達(dá)不滿。這也促成了民眾對于中國傳統(tǒng)節(jié)日的地位愈

36、發(fā)重視起來，在民眾的支持下，端午節(jié)終于在2008年被列為國家法定節(jié)假日，端午節(jié)當(dāng)天也就成了假期。再到2009年9月，聯(lián)合國教科文組織正式審議并批準(zhǔn)中國端午節(jié)列入世界非物質(zhì)文化遺產(chǎn)，這也讓端午節(jié)成為了中國第一個(gè)入選世界非物質(zhì)文化遺產(chǎn)的節(jié)日。</p><p>　　互聯(lián)網(wǎng)在當(dāng)今社會(huì)占有十分重要的地位，它已經(jīng)深深地打人了千家萬戶，這也就促成了網(wǎng)站強(qiáng)大的宣傳推廣功能?，F(xiàn)在只需要一個(gè)簡單的智能設(shè)備在接上網(wǎng)絡(luò)之后，通過任意的瀏

37、覽器就能輕松快捷地訪問網(wǎng)站。通過設(shè)計(jì)制作一個(gè)端午節(jié)主題的網(wǎng)站，可以高效快捷地宣傳推廣端午節(jié)節(jié)日文化。</p><p>　　1.1.2 課題意義</p><p>　　端午節(jié)是我國文化內(nèi)涵較為豐富的一個(gè)傳統(tǒng)節(jié)日。目前國人對于端午節(jié)的主要印象還在于劃龍舟、吃粽子等。關(guān)于端午節(jié)來歷的說法各有不同，但最普遍的說法是為了紀(jì)念愛國詩人屈原。屈原本是楚國大臣，因?yàn)閲急黄?，憂憤不已而投了汨羅江，他是中國歷

38、史上愛國、愛民精神的杰出代表。故此，端午節(jié)的首要文化內(nèi)涵就是愛國、愛民的精神。而青少年通過了解、學(xué)習(xí)這些傳統(tǒng)節(jié)日文化，樹立傳統(tǒng)節(jié)日意識，可以培養(yǎng)其愛國、愛民的精神。宣傳端午節(jié)文化，還可以幫助青少年培養(yǎng)積極正確的價(jià)值觀，學(xué)習(xí)欣賞優(yōu)良的傳統(tǒng)文化，注重保持健康的生活習(xí)慣。</p><p>　　1.2 課題的研究方法及預(yù)期結(jié)果</p><p>　　1.2.1 課題的研究方法</p>

39、<p>　　收集端午節(jié)相關(guān)素材，對于查找到的資料進(jìn)行分析和處理；分析網(wǎng)站需求，再據(jù)此設(shè)計(jì)網(wǎng)站功能；對比國內(nèi)外的同類型作品，從而對網(wǎng)頁進(jìn)行更合理的設(shè)計(jì)；學(xué)習(xí)jQuery、JavaScript、HTML等等相關(guān)知識；遇到不會(huì)的知識可以通過上網(wǎng)查詢或請教老師同學(xué)；網(wǎng)頁制作成完成后，需要對網(wǎng)站進(jìn)行功能測試及瀏覽器兼容性測試，接受反饋信息；最后完成制作，提交項(xiàng)目。</p><p>　　1.2.2 課題的預(yù)期結(jié)果&

40、lt;/p><p>　　完成首頁的設(shè)計(jì)制作；制作出“風(fēng)俗”、“飲食”、“詩文”三個(gè)二級頁面；實(shí)現(xiàn)網(wǎng)站的注冊、登錄功能；實(shí)現(xiàn)網(wǎng)站的留言板功能；制作出登錄后的動(dòng)畫頁面；完成至少三種瀏覽器的兼容性調(diào)試。</p><p>　　2 制作網(wǎng)站的相關(guān)工具及軟件介紹</p><p>　　2.1 jQuery介紹</p><p>　　jQuery，是由JavaSc

41、ript和查詢（Query）組合而成的，也就是輔助JavaScript開發(fā)的庫。可以說jQuery是一種特殊的JavaScript庫，使用它能夠很輕松地制作出網(wǎng)頁動(dòng)畫效果。jQuery的誕生就是為了簡單方便。與JavaScript的復(fù)雜語法相比較，jQuery的語法設(shè)計(jì)可以說非常簡單，開發(fā)者能更加便捷地制作動(dòng)畫效果、處理事件。而且jQuery還提供API讓開發(fā)者編寫插件。“這種模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)

42、態(tài)網(wǎng)頁”[]。在本次課題中主要用來制作動(dòng)畫部分。</p><p>　　2.2 Adobe Photoshop CS5軟件介紹</p><p>　　Adobe Photoshop，簡稱“PS”，是一種非常流行的圖像處理軟件。由于Photoshop可以用來美化圖片，所以它的流行程度遠(yuǎn)遠(yuǎn)超過其他軟件。它有很多的編輯、繪圖工具，可以很輕松地處理圖片。Photoshop可以說是功能強(qiáng)大，它經(jīng)常被應(yīng)用

43、在包括平面設(shè)計(jì)、廣告攝影、影像創(chuàng)意、網(wǎng)頁制作等領(lǐng)域。網(wǎng)絡(luò)的普及促使更多的人需要掌握Photoshop，因?yàn)樵谥谱骶W(wǎng)頁時(shí)Photoshop是必不可少的網(wǎng)頁圖像處理軟件。由于整體設(shè)計(jì)需要保證美觀效果，網(wǎng)頁中經(jīng)常需要用到大量的圖片素材，而搜集的素材往往不能直接使用，這時(shí)候就需要通過Photoshop進(jìn)行修改調(diào)整才能使用。在本次課題中主要是利用Photoshop來制作及處理部分素材。</p><p>　　2.3 Adob

44、e Dreamweaver CS5軟件介紹</p><p>　　Adobe Dreamweaver，簡稱“DW”，是一種可以制作網(wǎng)頁和管理網(wǎng)站的網(wǎng)頁編輯器，想要做個(gè)優(yōu)秀的網(wǎng)站就離不開它。利用它可以輕而易舉地制作出跨越平臺(tái)限制并且跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁。由于剛開始學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的時(shí)候一直是在使用Adobe Dreamweaver CS5，所以使用這個(gè)版本比較容易操作。在本次課題中Dreamweaver是主要的

45、制作工具，需要用它完成網(wǎng)頁的制作及修改。</p><p>　　2.4 XAMPP軟件包介紹</p><p>　　XAMPP（Apache+MySQL+PHP+PERL）是一個(gè)功能強(qiáng)大的建 XAMPP 軟件站集成軟件包，可以幫助用戶快速開發(fā)并且搭建自己的php網(wǎng)站。XAMPP使用起來非常方便簡單。在本次課題中將使用XAMPP建立簡單的后臺(tái)數(shù)據(jù)庫，將其與本地的測試服務(wù)器相連接，以便完成注冊、登

46、錄以及留言板功能的制作。</p><p><b>　　3 網(wǎng)站的設(shè)計(jì)</b></p><p>　　3.1 網(wǎng)頁內(nèi)容設(shè)計(jì)</p><p>　　本次的課題是基于jQuery的端午節(jié)網(wǎng)頁設(shè)計(jì)，所以是制作一個(gè)端午節(jié)主題的宣傳型網(wǎng)站。網(wǎng)站將制作10個(gè)頁面。首頁和三個(gè)二級頁面為網(wǎng)站的宣傳部分，一個(gè)注冊頁、一個(gè)登錄頁、一個(gè)留言頁為網(wǎng)站的交互部分，由三個(gè)頁面組

47、成的一個(gè)完整動(dòng)畫頁為網(wǎng)站的特點(diǎn)部分。</p><p>　　3.2 網(wǎng)頁排版設(shè)計(jì)</p><p>　　本次課題旨在宣傳端午節(jié)，將制作多個(gè)頁面。所有頁面共用頁首頁腳，頁首放置一張主題圖片，在圖片下方設(shè)置導(dǎo)航欄，頁腳為個(gè)人信息。頁首與頁腳的中間位置按實(shí)際情況安排布局。首頁為端午節(jié)節(jié)日簡介，再分別從“風(fēng)俗”、“飲食”、“詩文”三個(gè)方面各制作一個(gè)二級頁面。注冊、登錄頁在正中間放置信息欄，留言頁左邊放

48、置留言框，右邊放置留言列表。動(dòng)畫頁中間部分鏈接完整動(dòng)畫。</p><p>　　網(wǎng)站框架圖如圖3.1所示。</p><p>　　圖3.1 網(wǎng)站框架圖</p><p>　　3.3 交互功能設(shè)計(jì)</p><p>　　本次課題的交互功能有注冊、登錄以及留言板。注冊成功后頁面將跳轉(zhuǎn)到首頁，登錄成功后頁面將跳轉(zhuǎn)到動(dòng)畫頁。留言板輸入留言，刷新后可以在留言列

49、表顯示。需要用到的工具有Adobe Dreamweaver CS5和XAMPP，通過將本地測試服務(wù)器連接一個(gè)簡單的數(shù)據(jù)庫，即“通過MySQL+PHP實(shí)現(xiàn)這些功能”[]。</p><p>　　注冊、登錄設(shè)計(jì)圖如圖3.2所示。</p><p>　　圖3.2 注冊/登錄設(shè)計(jì)圖</p><p><b>　　3.4 動(dòng)畫設(shè)計(jì)</b></p>

50、<p>　　本次設(shè)計(jì)的思路是用戶在登錄之后頁面將跳到一個(gè)動(dòng)畫頁，將由三個(gè)主題頁面形成一個(gè)完整的動(dòng)畫效果。三個(gè)頁面分別是三個(gè)不同的場景，場景一的時(shí)間為上午，色調(diào)偏亮，靜態(tài)物體有建筑、樹木、道路等，動(dòng)態(tài)物體有太陽、云。場景二的時(shí)間為黃昏，色調(diào)偏暗，靜態(tài)物體有樹木、道路、商店等，動(dòng)態(tài)物體有商店的門、燈、鳥。場景三的時(shí)間為晚上，主體顏色為藍(lán)色，加上白色的月亮和星星，靜態(tài)物體有月亮、星星、小橋、河流、遠(yuǎn)山等，動(dòng)態(tài)物體有星星。主角從場景

51、一走到場景三，在場景二的商店買一束花，送給場景三的女伴，二人轉(zhuǎn)身看著月亮，動(dòng)畫結(jié)束。三個(gè)場景加一段轉(zhuǎn)身，每段都配上合適的背景音樂。動(dòng)畫主要基于jQuery制作完成，也需要用到CSS3的相關(guān)知識。</p><p><b>　　4 網(wǎng)頁的制作</b></p><p><b>　　4.1 建立站點(diǎn)</b></p><p>　　點(diǎn)

52、擊“站點(diǎn)”，選擇“新建站點(diǎn)”，站點(diǎn)名稱填寫“端午”，在本地站點(diǎn)文件夾中填寫“C:\xampp\htdocs\1221749\”；再點(diǎn)擊“高級設(shè)置”，在本地信息中Web URL那一欄填寫“http://localhost：8080/1221749/”，完成之后點(diǎn)擊“保存”，站點(diǎn)建立完成。</p><p>　　4.2 主體框架的制作</p><p>　　由于所有頁面都共用一個(gè)主體框架，所以第一

53、步先制作出網(wǎng)站的框架。首先在站點(diǎn)文件夾下新建“shouye.html”文件。將頁面的背景設(shè)置為白色，兩邊設(shè)置為紫色。再在頁首位置放置一張經(jīng)Photoshop處理過的主題圖片，然后在圖片下面設(shè)置導(dǎo)航欄，導(dǎo)航欄分成7格，分別以白色字體命名為“首頁”、“風(fēng)俗”、“飲食”、“詩文”、“注冊”、“登錄”、“留言”。將頁腳背景為紫色，在當(dāng)中用白色字體填寫個(gè)人信息。頁首頁腳制作完成，中間部分暫時(shí)保持空白。</p><p>　　

54、頁首效果如圖4.1所示。</p><p><b>　　圖 4.1 頁首</b></p><p>　　頁腳效果如圖4.2所示。</p><p><b>　　圖 4.2 頁腳</b></p><p>　　4.3 首頁及二級頁面的制作</p><p>　　主體框架完成以后，現(xiàn)在就根

55、據(jù)實(shí)際需求開始更細(xì)致地劃分中間的空白部分。</p><p>　　4.3.1 首頁的制作</p><p>　　首頁的內(nèi)容是端午節(jié)的簡介，首先將空白區(qū)域劃分為左中右三塊，左邊內(nèi)容為端午節(jié)的節(jié)日別稱，寬度設(shè)置為200px；中間內(nèi)容為節(jié)日的發(fā)展歷史，寬度設(shè)置為440px；右邊內(nèi)容為節(jié)日的各種起源說明，寬度設(shè)置為260px；在右下角放置一個(gè)小盒子，內(nèi)容為屈原的圖像還有他的幾句千古名句。</p&

56、gt;<p>　　4.3.2 “風(fēng)俗”頁的制作</p><p>　　“風(fēng)俗”頁就只要分為左右兩大塊，先在左上角放置一個(gè)小盒子，盒內(nèi)插入幾張圖片，將圖片處理成相同大小，借由JavaScript制作出圖片自動(dòng)輪播切換的效果。左下方大篇幅的面積用來介紹節(jié)日的主要風(fēng)俗，左邊寬度設(shè)置為640px；右邊為各地風(fēng)俗介紹，寬度只需要260px。</p><p>　　圖片自動(dòng)輪播切換效果如圖4

57、.3所示。</p><p>　　圖 4.3 圖片自動(dòng)輪播切換效果</p><p>　　4.3.3 “飲食”頁的制作</p><p>　　“飲食”頁首先也是分為左右兩大塊。將左邊寬度設(shè)置為640px，然后又把它分為上中下三塊。最上方為粽子的詳細(xì)介紹，中間給出一些端午節(jié)期間的健康飲食建議，下方再對節(jié)日的其它特色飲食加以詳細(xì)說明。右邊區(qū)域用來介紹各地區(qū)的特色，寬度也只要設(shè)

58、置為260px。整個(gè)頁面內(nèi)以文字為主，再將許多素材圖片合理插入文中。</p><p>　　4.3.4 “詩文”頁的制作</p><p>　　“詩文”頁分為上下兩塊。上邊又分為左右兩塊。左邊為節(jié)日的相關(guān)故事傳說，寬度為600px。右邊為民間諺語和楹聯(lián)對子，寬度為300px。下邊放置一個(gè)盒子，內(nèi)容為相關(guān)的詩詞欣賞，點(diǎn)擊左邊的詩詞名稱，右邊會(huì)顯示出完整的詩詞，由JavaScript制作完成。&l

59、t;/p><p>　　詩詞點(diǎn)擊的JavaScript代碼如下：</p><p>　　function funcShow(id){</p><p>　　for(var i=0;i<12;i++){</p><p>　　var divInfo =document.getElementById('div'+(i+1));</

60、p><p>　　divInfo.style.display='none';</p><p><b>　　}</b></p><p>　　var div =document.getElementById('div'+id);</p><p>　　div.style.display='bl

61、ock';</p><p><b>　　}</b></p><p>　　詩詞點(diǎn)擊的效果圖如圖4.4所示。</p><p>　　圖 4.4 詩詞點(diǎn)擊效果圖</p><p>　　4.4 交互功能的制作</p><p>　　雙擊打開“xampp-control”，在XAMPP的控制板上點(diǎn)擊Apa

62、che、MySQL兩欄的Start選項(xiàng)，等到指示燈變成綠色以后，點(diǎn)擊MySQL的Admin選項(xiàng)，瀏覽器將自動(dòng)跳轉(zhuǎn)到“http://localhost/phpmyadmin/”。</p><p>　　Xampp顯示界面如圖4.5所示。</p><p>　　圖 4.5 xampp顯示界面</p><p>　　先在數(shù)據(jù)庫欄新建數(shù)據(jù)庫“ok”。然后在“ok”數(shù)據(jù)庫中新建注冊

63、登錄所用的數(shù)據(jù)表，在表中添加“id”、“name”、“password”，按實(shí)際需求設(shè)置好參數(shù)，將名字保存為“good”。再在“ok”數(shù)據(jù)庫中新建留言板所用的數(shù)據(jù)表，在表中添加“head”、“l(fā)iuyan”，按實(shí)際需求設(shè)置好參數(shù)，將名字保存為“l(fā)iuyan”。</p><p>　　數(shù)據(jù)庫顯示界面如圖4.6所示。</p><p>　　圖 4.6 數(shù)據(jù)庫顯示界面</p><

64、p>　　打開Dreamweaver，點(diǎn)擊“站點(diǎn)”，選擇“管理站點(diǎn)”，編輯站點(diǎn)“端午”，在“服務(wù)器”欄中添加新服務(wù)器，設(shè)置如下：服務(wù)器名稱：“80”；連接方法：“本地/網(wǎng)絡(luò)”；服務(wù)器文件夾：“C:\xampp\htdocs\1221749\”；Web URL：“http://localhost/1221749/”；點(diǎn)擊“高級”，在服務(wù)器模型中選擇“PHP MySQL”。保存以后勾選測試。</p><p>　　

65、點(diǎn)擊“MySQL連接”，連接名稱：“b”；MySQL服務(wù)器：“l(fā)ocalhost”；用戶名：“root”；密碼為空；選取數(shù)據(jù)庫“ok”，點(diǎn)擊“確定”，連接成功。</p><p>　　連接成功顯示界面如圖4.7所示。</p><p>　　圖 4.7連接成功顯示界面</p><p>　　4.4.1 注冊登錄的制作</p><p>　　按原設(shè)計(jì)制作

66、出“注冊”及“登錄”兩個(gè)頁面，分別在框架中間制作注冊、登錄框，輸入姓名和密碼，注冊后成功跳轉(zhuǎn)到首頁，登錄后可跳轉(zhuǎn)到預(yù)留的動(dòng)畫頁面。注冊登錄制作完成。</p><p>　　注冊界面如圖4.8所示。</p><p><b>　　圖4.8 注冊界面</b></p><p>　　4.4.2 留言功能的制作</p><p>　　按

67、原設(shè)計(jì)制作出“留言”頁，在框架中劃分為左右兩塊，左邊為留言框，右邊為留言列表。輸入標(biāo)題和留言，刷新以后能在留言列表中正常顯示。留言功能制作完成。</p><p>　　4.5 動(dòng)畫頁面的制作</p><p>　　動(dòng)畫頁面是本次設(shè)計(jì)的難點(diǎn)所在，動(dòng)畫內(nèi)容主要是基于jQuery制作完成，但也有很多地方需要用到HTML5和CSS的相關(guān)知識。</p><p>　　4.5.1 頁

68、面的搭建與切換</p><p>　　第一步要完成頁面的搭建與切換，首先要做好頁面的橫向布局，整個(gè)動(dòng)畫效果實(shí)際上是以主角走路為前提，主角將會(huì)在三個(gè)主題頁面中切換，而且在每個(gè)主題頁面中會(huì)有一些不同的效果呈現(xiàn)。通過調(diào)整頁面與主角運(yùn)動(dòng)的速率變化，可以讓用戶產(chǎn)生一個(gè)視覺上的錯(cuò)覺，也就是視覺差，這樣能形成人物在不斷走路前行的感覺。</p><p>　　整個(gè)動(dòng)畫的頁面布局結(jié)構(gòu)如下：</p>

69、<p>　　<ul class='content-wrap'></p><p>　　<!-- 第一副畫面 --></p><p>　　<li> 頁面1 </li></p><p>　　<!-- 第二副畫面 --></p><p>　　<li>

70、頁面2 </li></p><p>　　<!-- 第三副畫面 --></p><p>　　<li> 頁面3 </li></p><p><b>　　</ul></b></p><p>　　這樣雖然是形成了橫向布局與無縫拼接，但是我們所能看到的網(wǎng)頁范圍永遠(yuǎn)只能顯示

71、出一個(gè)主題頁面的畫面，所以需要給祖先節(jié)點(diǎn)上套一個(gè)限制顯示區(qū)域的節(jié)點(diǎn)。</p><p>　　接著就是實(shí)現(xiàn)頁面之間的卷滾切換效果，應(yīng)用CSS3中的transform屬性可以用來處理改變坐標(biāo)，“transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換，該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜”[]。其中會(huì)有一個(gè)值translate3d(x,y,z) ，這是用來控制元素的位置在頁面上的三軸的位置的，translat

72、e3d指明了3d也就是啟用了3d加速，即啟動(dòng)GPU來處理，性能更強(qiáng)。transition可以用來設(shè)置一些具體的參數(shù)，像是動(dòng)畫執(zhí)行的時(shí)間，算法的變化、動(dòng)畫的延時(shí)等等。</p><p>　　然后就可以將頁面切換部分的代碼封裝好，這里采用的寫法是面向接口編程，也就是將行為封裝分布在各個(gè)對象中，并且讓這些對象自己負(fù)責(zé)自己的行為，這也是面向?qū)ο笤O(shè)計(jì)的一個(gè)優(yōu)點(diǎn)。</p><p>　　4.5.2 人物的

73、動(dòng)作分解</p><p>　　第二步是做好動(dòng)畫主角的動(dòng)作分解，先實(shí)現(xiàn)布局的自適應(yīng)動(dòng)態(tài)調(diào)整，動(dòng)畫主角的布局與頁面根節(jié)點(diǎn)屬于并列結(jié)構(gòu)。背景圖是靠百分比控制的，會(huì)隨著分辨率的變化而變化。由于素材一直是固定的，所以人物的尺寸是無法變化的，這里就需要通過JS動(dòng)態(tài)調(diào)整。人物坐標(biāo)的算法：主角的top坐標(biāo)值 = 中間路段的中間坐標(biāo)值 - 主角的高度。</p><p>　　再完成精靈動(dòng)畫，CSS Sprit

74、es在國內(nèi)一般被稱作CSS精靈，其原理就是：通過不斷的切換圖片給人感覺視覺上不斷的發(fā)生變化，就像是gif動(dòng)畫之類的效果。</p><p>　　實(shí)現(xiàn)主角走路，用精靈實(shí)現(xiàn)了人物腳步的變化，但是這樣看起來人物還只是在原地踏步，如果要想實(shí)現(xiàn)人物正常走動(dòng)的效果，那就需要改變?nèi)宋锏淖鴺?biāo)位置，這里可以采用CSS3的transition來修改left的值。</p><p>　　對運(yùn)動(dòng)狀態(tài)進(jìn)行控制，通過CS

75、S3的animation與transition的結(jié)合實(shí)現(xiàn)了人物的走路的效果。要想對運(yùn)動(dòng)狀態(tài)進(jìn)行控制，可以用到animation的暫停方式。CSS3的animation直接提供一個(gè)animation-play-state的樣式來控制動(dòng)畫的暫停處理。</p><p>　　接著處理路徑動(dòng)畫。路徑動(dòng)畫也就是讓某個(gè)東西按照預(yù)想的路徑進(jìn)行運(yùn)動(dòng)。</p><p>　　4.5.3 流程的編寫與封裝<

76、/p><p>　　第三步就要進(jìn)行流程的編寫與封裝了，首先對異步編程進(jìn)行處理，jQuery 中引入了 Promise 的概念?！癙romise是一種令代碼異步行為更加優(yōu)雅的抽象”[]。通過運(yùn)用它可以像寫同步代碼一樣去寫異步代碼。</p><p>　　再對主角部分代碼進(jìn)行封裝。整個(gè)動(dòng)畫其實(shí)都是小男孩的運(yùn)動(dòng)，走到不同的路段就會(huì)有不同的動(dòng)作，走路是通過CSS3的transition與animation

77、結(jié)合完成的，所以針對這類異步的處理要使用jQuery的Deferred封裝起來。此外，整個(gè)結(jié)構(gòu)中都是采用面向接口編程，也就是將行為分布在各對象中，再讓這些對象各自負(fù)責(zé)自己的行為。</p><p>　　接著要實(shí)現(xiàn)頁面與人物之間形成一種視覺差效果。人物的走路區(qū)間其實(shí)只是一個(gè)頁面單位，相對點(diǎn)也就是是父級的div。頁面滾動(dòng)只有兩個(gè)頁面單位，因?yàn)楸旧砭蜁?huì)占據(jù)一個(gè)，所以人物如果走到中間位置，那么比例是0.5 ，換算后就是

78、0.5*頁面寬度，而頁面要到中間位置就是，比例是1，換算就是 1*頁面寬度。當(dāng)人物完成第一段路程的時(shí)候，就開始調(diào)用頁面接口讓頁面滾動(dòng)，之后再通過boy.walkTo繼續(xù)讓人物走路，只需要給人物和頁面設(shè)置相同的位置與時(shí)間，內(nèi)部都會(huì)自己進(jìn)行計(jì)算，只需要調(diào)用 scrollTo(5000, 1) 傳遞時(shí)間和頁面的比例，頁面也就會(huì)自動(dòng)的滾動(dòng)到指定的區(qū)域。</p><p>　　4.5.4 主題頁面一的制作</p>

79、<p>　　第四步就開始制作主題頁面了，頁面一的時(shí)間設(shè)置在上午，首先做好頁面布局，添加太陽跟云的運(yùn)動(dòng)效果。頁面中間有個(gè)太陽從中間出現(xiàn)，然后慢慢的向西邊落下去。另外就是幾朵飄動(dòng)的云。太陽的運(yùn)動(dòng)效果，主要用CSS3的動(dòng)畫實(shí)現(xiàn)。</p><p>　　-webkit-animation-duration: 30s;</p><p>　　-moz-animation-duration:

80、 30s;</p><p>　　設(shè)定完成這個(gè)動(dòng)畫所需要的時(shí)間為30s。云的運(yùn)動(dòng)效果與太陽的運(yùn)動(dòng)效果實(shí)現(xiàn)方式是相似的，但是云是有好多個(gè)的，而且還要不斷的重復(fù)飄動(dòng)。動(dòng)畫播放次數(shù)的默認(rèn)值一般為1，所以需要作出修改。</p><p>　　-webkit-animation-iteration: infinite;</p><p>　　-moz-animation-itera

81、tion: infinite; </p><p>　　將動(dòng)畫播放次數(shù)改成infinite即無限制，就可以實(shí)現(xiàn)動(dòng)畫不斷地播放。</p><p>　　4.5.5 主題頁面二的制作</p><p>　　頁面二的時(shí)間就是黃昏了，首先也是完成基本的頁面布局，接著就開始實(shí)現(xiàn)開門關(guān)門的動(dòng)畫效果，門的布局代碼如下:</p>

82、<p>　　<div class="door"></p><p>　　<div class="door-left"></div></p><p>　　<div class="door-right"></div></p><p><

83、b>　　</div></b></p><p>　　通過一個(gè)父容器定位，左右門可以采用left處理分別是0%與50%，這樣在通過JS控制時(shí)候只需要改變left就可以形成開關(guān)門的效果。開關(guān)門的代碼如下:</p><p><b>　　//開門</b></p><p>　　function openDoor() {<

84、/p><p>　　return doorAction('-50%', '100%', 2000)</p><p><b>　　}</b></p><p><b>　　//關(guān)門</b></p><p>　　function shutDoor() {</p>&

85、lt;p>　　return doorAction('0%', '50%', 2000)</p><p><b>　　}</b></p><p><b>　　//開門</b></p><p>　　$("button:first").click(function() {

86、</p><p>　　openDoor();</p><p><b>　　})</b></p><p><b>　　//關(guān)門</b></p><p>　　$("button:last").click(function() {</p><p>　　shutD

87、oor();</p><p><b>　　})</b></p><p>　　再添加燈光開關(guān)的效果，在開門的同時(shí)有一個(gè)燈光的變化，開門時(shí)燈是亮的，關(guān)門燈就會(huì)滅掉，這個(gè)動(dòng)作本身比較簡單，但現(xiàn)在需要配合開關(guān)門之后的一個(gè)效果，就要依賴開關(guān)門的事件回調(diào)。</p><p><b>　　//開門</b></p><p

88、>　　openDoor().then(function() {</p><p><b>　　//開燈</b></p><p>　　lamp.bright();</p><p><b>　　})</b></p><p><b>　　//關(guān)門</b></p>&

89、lt;p>　　shutDoor().then(function() {</p><p><b>　　//燈滅</b></p><p>　　lamp.dark();</p><p><b>　　});</b></p><p>　　然后計(jì)算好主角進(jìn)出商店的坐標(biāo)，人物走進(jìn)門的中間位置,算法如下：&l

90、t;/p><p>　　translateX = 門中間的left值 - 人物中間的left值</p><p>　　translateY = 人物底部的top值 - 門中間的top值</p><p>　　在人物進(jìn)出商店的部分增加了toShop與outShop兩個(gè)接口，walkToShop與walkOutShop兩個(gè)實(shí)現(xiàn)方法代碼如下：</p><p>

91、;<b>　　//開始走路</b></p><p>　　var walkPlay = stratRun({</p><p>　　transform: 'translateX,scale',//</p><p>　　opacity: 0.1}, 2000);</p><p><b>　　//走路完

92、畢</b></p><p>　　walkPlay.done(function() {</p><p>　　$boy.css({</p><p>　　opacity: 0</p><p><b>　　})</b></p><p>　　defer.resolve();</p>

93、<p><b>　　})</b></p><p>　　在走路完畢后，監(jiān)聽了一個(gè)done的成功方法，可用來設(shè)置人物的隱藏，這個(gè)是Deferred的一個(gè)接口。主角走進(jìn)商店買花，只要做一個(gè)停頓的時(shí)間，代碼如下：</p><p><b>　　//取花</b></p><p>　　function talkFlower(

94、) {</p><p>　　//增加延時(shí)等待效果</p><p>　　var defer = $.Deferred();</p><p>　　setTimeout(function() {</p><p><b>　　//取花</b></p><p>　　$boy.addClass('sl

95、owFlolerWalk')</p><p>　　defer.resolve()</p><p><b>　　}, 1000)</b></p><p>　　return defer</p><p><b>　　}</b></p><p>　　然后再加一個(gè)鳥飛過的效果；

96、飛鳥的動(dòng)畫也跟小男孩動(dòng)畫一樣，只要通過精靈與transition的組合就能實(shí)現(xiàn)。先在頁面中增加一個(gè)鳥的HTML結(jié)構(gòu)，代碼如下：</p><p>　　<div class="bird"></div></p><p><b>　　鳥運(yùn)動(dòng)的代碼如下：</b></p><p>　　var bird = {&l

97、t;/p><p>　　elem: $(".bird"),</p><p>　　fly: function() {</p><p>　　this.elem.addClass('birdFly')</p><p>　　this.elem.transition({</p><p>　　righ

98、t: container.width()</p><p>　　}, 15000, 'linear');</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　4.5.6 主題頁面三的制作</p><p>　　頁面三

99、的時(shí)間安排在晚上，將頁面布局設(shè)定好，添加星星閃爍的效果，星星的閃爍不需要手動(dòng)觸發(fā)，也在不斷的循環(huán)變化，所以最簡單的方法就是用animation處理。</p><p><b>　　先添加6個(gè)星星</b></p><p>　　<ul class="stars"></p><p>　　<li class=&quo

100、t;stars1"></li></p><p>　　<li class="stars2"></li></p><p>　　<li class="stars3"></li></p><p>　　<li class="stars4"

101、;></li></p><p>　　<li class="stars5"></li></p><p>　　<li class="stars6"></li></p><p><b>　　</ul></b></p>&

102、lt;p>　　給每個(gè)星星添加閃爍效果，第一個(gè)星星閃爍的代碼如下：</p><p><b>　　.stars1 {</b></p><p><b>　　top: 20%;</b></p><p>　　left: 30%;</p><p>　　-webkit-animation-duration:

103、 5s;</p><p>　　-moz-animation-duration: 5s;</p><p><b>　　}</b></p><p>　　再對運(yùn)動(dòng)軌跡進(jìn)行處理，人物走路的這個(gè)運(yùn)動(dòng)軌跡是由上橋與橋上直行的兩個(gè)動(dòng)作組成。由于人物采用background-position的關(guān)系，所以采用JS精確處理了，為了讓效果看起來更自然，在實(shí)現(xiàn)上會(huì)寫3

104、個(gè)translate的動(dòng)畫。動(dòng)作可以分解：走到橋邊，上橋，橋上直行三個(gè)動(dòng)作構(gòu)成。</p><p>　　做好轉(zhuǎn)身效果，通過定時(shí)器模擬一個(gè)暫停的時(shí)間，這樣感覺人物會(huì)有一個(gè)等待轉(zhuǎn)身的效果?？梢酝ㄟ^增加一個(gè)rotate的樣式調(diào)用CSS3動(dòng)畫。轉(zhuǎn)身樣式的代碼如下：</p><p>　　-webkit-animation-name: girl-rotate;</p><p>　

105、　-webkit-animation-duration: 850ms;</p><p>　　-webkit-animation-iteration-count: 1;</p><p>　　-webkit-animation-timing-function: step-start;</p><p>　　-webkit-animation-fill-mode: forw

106、ards;</p><p>　　添加字幕抖動(dòng)。抖動(dòng)動(dòng)畫處理的原理與rotate是一樣的，區(qū)別就是抖動(dòng)動(dòng)畫是2組CSS3的animation動(dòng)畫組成。抖動(dòng)動(dòng)畫的代碼如下：</p><p>　　@-webkit-keyframes logoshake {</p><p>　　0%, 100% {</p><p>　　-moz-transform:

107、 translate3d(0, 0, 0);</p><p><b>　　}</b></p><p><b>　　10%,30%,</b></p><p><b>　　50%,70%,</b></p><p><b>　　90% {</b></p&g

108、t;<p>　　-moz-transform: translate3d(-5px, 0, 0);</p><p><b>　　}</b></p><p>　　20%,40%,60%,80% {</p><p>　　-moz-transform: translate3d(10px, 0, 0);</p><p&g

109、t;<b>　　}</b></p><p><b>　　}</b></p><p>　　4.5.7 添加背景音樂</p><p>　　第五步再是添加背景音樂，背景音樂很簡單，可以直接用HTML5的audio元素播放。在HTML5標(biāo)準(zhǔn)網(wǎng)頁里面，可以運(yùn)用audio標(biāo)簽來完成對聲音的調(diào)用及播放，使用：</p>&l

110、t;p>　　var audio = new Audio(url); //創(chuàng)建一個(gè)音頻對象并傳入地址</p><p>　　audio.loop = loop || false; //是否循環(huán)</p><p>　　audio.play(); //開始播放</p><p>　　傳遞一個(gè)視頻的地址，創(chuàng)建一個(gè)Audio對象，設(shè)置屬性loop是否循環(huán)播放，然后調(diào)用

111、play方法就可以實(shí)現(xiàn)播放了。</p><p>　　4.5.8 整合工作</p><p>　　最后一項(xiàng)任務(wù)就是把所有設(shè)置的參數(shù)都合并到了confi配置文件中，同時(shí)也增加了一些配置，例如正比縮放，這樣可以保持頁面布局縮放看起來不會(huì)變型。</p><p>　　4.5.9 技術(shù)總結(jié)</p><p>　　動(dòng)畫頁面所用到的主要技術(shù)是jQuery和CSS

112、3，但每個(gè)部分的實(shí)現(xiàn)都會(huì)涉及到不同的知識點(diǎn)。在自適應(yīng)分辨率這方面的問題可以通過JS加上百分比布局進(jìn)行處理；而圖片加載與資源占用的問題可以通過合成“雪碧圖”解決；幀動(dòng)畫只要通過CSS3的animation實(shí)現(xiàn)，并且還能夠控制狀態(tài)；布局既可以用left.top布局，也可以使用CSS3的transform處理；元素的變化，只需要通過設(shè)置translate3d啟動(dòng)GPU加速；想做漸變動(dòng)畫可以使用CSS3的transition；添加背景音樂這里有

113、HTML5音頻的使用；異步編程的邏輯嵌套問題采用promise可以解決；此外就是代碼組織的方法等等。</p><p><b>　　4.6 整理文件夾</b></p><p>　　實(shí)現(xiàn)各個(gè)頁面之間的相互鏈接，將各類型文件分別整理，再安放在相對應(yīng)的文件夾內(nèi)。圖片素材文件夾“images”，背景音樂文件夾“music”，css樣式文件夾“css”，JavaScript代碼文

114、件夾“js”。整理過后，需注意網(wǎng)頁文件內(nèi)的鏈接地址是否正確，更新修改錯(cuò)誤的鏈接。網(wǎng)站的制作部分就此完成。</p><p><b>　　5 網(wǎng)站測試</b></p><p>　　本網(wǎng)站是一個(gè)端午節(jié)宣傳的主題網(wǎng)站，現(xiàn)在將對網(wǎng)站進(jìn)行實(shí)踐交互功能、瀏覽動(dòng)畫頁面以及瀏覽器兼容性的測試。首頁如圖5.1所示。</p><p><b>　　圖5.1

115、首頁</b></p><p>　　5.1 交互功能測試</p><p>　　分別對注冊、登錄及留言功能進(jìn)行測試。在留言板中輸入標(biāo)題和留言，提交后刷新在留言列表顯示結(jié)果。留言界面如圖5.2所示。</p><p><b>　　圖5.2 留言界面</b></p><p>　　輸入注冊過的姓名和密碼，頁面跳轉(zhuǎn)到動(dòng)畫界

116、面。登錄界面如圖5.3所示。</p><p><b>　　圖5.3 登錄界面</b></p><p><b>　　5.2 動(dòng)畫測試</b></p><p>　　登錄后自動(dòng)運(yùn)行動(dòng)畫。動(dòng)畫流暢，音樂合適。動(dòng)畫頁面主要有三個(gè)重要的轉(zhuǎn)換點(diǎn)。分別為頁面切換、進(jìn)入商店、人物轉(zhuǎn)身。頁面過渡切換如圖5.4所示。</p>&l

117、t;p><b>　　圖5.4 頁面切換</b></p><p>　　進(jìn)入商店效果如圖5.5所示。</p><p><b>　　圖5.5 進(jìn)入商店</b></p><p>　　人物轉(zhuǎn)身效果如圖5.6所示。</p><p>　　圖 5.6 人物轉(zhuǎn)身</p><p>　　5.

118、3 瀏覽器兼容性測試</p><p>　　分別在Microsoft Edge、Google chrome、Mozilla Firefox三種瀏覽器上輸入“http://localhost/1221749/shouye.html”，瀏覽每個(gè)頁面，測試各交互功能，查看動(dòng)畫頁面運(yùn)行效果，一切均正常進(jìn)行。</p><p><b>　　結(jié) 論</b></p>