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

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

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

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

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

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

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

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

9、風(fēng)俗、飲食、文學(xué)等方面進(jìn)行詳細(xì)介紹，動(dòng)畫(huà)頁(yè)面則基于jQuery制作完成。jQuery是一種特殊的JavaScript庫(kù)，它能夠很輕松地使網(wǎng)頁(yè)做成動(dòng)畫(huà)效果。網(wǎng)站的交互功能包含注冊(cè)、登錄及留言功能，都由XAMPP實(shí)現(xiàn)。</p><p>　　關(guān)鍵詞：jQuery，端午節(jié)，網(wǎng)頁(yè)設(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)頁(yè)內(nèi)容設(shè)計(jì)5</p><p>　　3.2 網(wǎng)頁(yè)排版設(shè)計(jì)5</p><p>　　3.3 交互功能設(shè)計(jì)6</p><p>　　3.4 動(dòng)畫(huà)設(shè)計(jì)6</p><p><b>　　4 網(wǎng)頁(yè)的制作7</b><

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

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

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

25、lt;p>　　4.5.7 添加背景音樂(lè)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)站測(cè)試19</b></p><p>　　5.1 交互功能測(cè)試19&

26、lt;/p><p>　　5.2 動(dòng)畫(huà)測(cè)試20</p><p>　　5.3 瀏覽器兼容性測(cè)試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)歷的五月初五，是中國(guó)的傳統(tǒng)佳節(jié)日——端午節(jié)。對(duì)于大多數(shù)中國(guó)人而言，端午節(jié)的重要意義應(yīng)該是僅次于春節(jié)和中秋節(jié)的。</p><p>　　一提到端午節(jié)，很容易就聯(lián)想到吃粽子、劃龍舟等傳統(tǒng)習(xí)俗。端午節(jié)的來(lái)歷有很多的說(shuō)法，最普遍的說(shuō)法就是為了紀(jì)念愛(ài)國(guó)詩(shī)人屈原了。屈原是戰(zhàn)國(guó)時(shí)期的楚國(guó)人，當(dāng)時(shí)秦國(guó)勢(shì)強(qiáng)而楚國(guó)勢(shì)

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

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

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

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

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

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

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

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

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

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

38、史上愛(ài)國(guó)、愛(ài)民精神的杰出代表。故此，端午節(jié)的首要文化內(nèi)涵就是愛(ài)國(guó)、愛(ài)民的精神。而青少年通過(guò)了解、學(xué)習(xí)這些傳統(tǒng)節(jié)日文化，樹(shù)立傳統(tǒng)節(jié)日意識(shí)，可以培養(yǎng)其愛(ài)國(guó)、愛(ài)民的精神。宣傳端午節(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)素材，對(duì)于查找到的資料進(jìn)行分析和處理；分析網(wǎng)站需求，再據(jù)此設(shè)計(jì)網(wǎng)站功能；對(duì)比國(guó)內(nèi)外的同類型作品，從而對(duì)網(wǎng)頁(yè)進(jìn)行更合理的設(shè)計(jì)；學(xué)習(xí)jQuery、JavaScript、HTML等等相關(guān)知識(shí)；遇到不會(huì)的知識(shí)可以通過(guò)上網(wǎng)查詢或請(qǐng)教老師同學(xué)；網(wǎng)頁(yè)制作成完成后，需要對(duì)網(wǎng)站進(jìn)行功能測(cè)試及瀏覽器兼容性測(cè)試，接受反饋信息；最后完成制作，提交項(xiàng)目。</p><p>　　1.2.2 課題的預(yù)期結(jié)果&

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

56、gt;<p>　　4.3.2 “風(fēng)俗”頁(yè)的制作</p><p>　　“風(fēng)俗”頁(yè)就只要分為左右兩大塊，先在左上角放置一個(gè)小盒子，盒內(nèi)插入幾張圖片，將圖片處理成相同大小，借由JavaScript制作出圖片自動(dòng)輪播切換的效果。左下方大篇幅的面積用來(lái)介紹節(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 “飲食”頁(yè)的制作</p><p>　　“飲食”頁(yè)首先也是分為左右兩大塊。將左邊寬度設(shè)置為640px，然后又把它分為上中下三塊。最上方為粽子的詳細(xì)介紹，中間給出一些端午節(jié)期間的健康飲食建議，下方再對(duì)節(jié)日的其它特色飲食加以詳細(xì)說(shuō)明。右邊區(qū)域用來(lái)介紹各地區(qū)的特色，寬度也只要設(shè)

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

59、t;/p><p>　　詩(shī)詞點(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>　　詩(shī)詞點(diǎn)擊的效果圖如圖4.4所示。</p><p>　　圖 4.4 詩(shī)詞點(diǎn)擊效果圖</p><p>　　4.4 交互功能的制作</p><p>　　雙擊打開(kāi)“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ù)庫(kù)欄新建數(shù)據(jù)庫(kù)“ok”。然后在“ok”數(shù)據(jù)庫(kù)中新建注冊(cè)

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

64、p>　　打開(kāi)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)擊“高級(jí)”，在服務(wù)器模型中選擇“PHP MySQL”。保存以后勾選測(cè)試。</p><p>　　

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

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

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

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

69、<p>　　<ul class='content-wrap'></p><p>　　<!-- 第一副畫(huà)面 --></p><p>　　<li> 頁(yè)面1 </li></p><p>　　<!-- 第二副畫(huà)面 --></p><p>　　<li>

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

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

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

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

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

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

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

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

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

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

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

81、tion: infinite; </p><p>　　將動(dòng)畫(huà)播放次數(shù)改成infinite即無(wú)限制，就可以實(shí)現(xiàn)動(dòng)畫(huà)不斷地播放。</p><p>　　4.5.5 主題頁(yè)面二的制作</p><p>　　頁(yè)面二的時(shí)間就是黃昏了，首先也是完成基本的頁(yè)面布局，接著就開(kāi)始實(shí)現(xiàn)開(kāi)門(mén)關(guān)門(mén)的動(dòng)畫(huà)效果，門(mén)的布局代碼如下:</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>　　通過(guò)一個(gè)父容器定位，左右門(mén)可以采用left處理分別是0%與50%，這樣在通過(guò)JS控制時(shí)候只需要改變left就可以形成開(kāi)關(guān)門(mén)的效果。開(kāi)關(guān)門(mén)的代碼如下:</p><p><b>　　//開(kāi)門(mén)</b></p><p>　　function openDoor() {<

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

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

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

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

88、>　　openDoor().then(function() {</p><p><b>　　//開(kāi)燈</b></p><p>　　lamp.bright();</p><p><b>　　})</b></p><p><b>　　//關(guān)門(mé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)門(mén)的中間位置,算法如下：&l

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

91、;<b>　　//開(kāi)始走路</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)聽(tīng)了一個(gè)done的成功方法，可用來(lái)設(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è)鳥(niǎo)飛過(guò)的效果；

96、飛鳥(niǎo)的動(dòng)畫(huà)也跟小男孩動(dòng)畫(huà)一樣，只要通過(guò)精靈與transition的組合就能實(shí)現(xiàn)。先在頁(yè)面中增加一個(gè)鳥(niǎo)的HTML結(jié)構(gòu)，代碼如下：</p><p>　　<div class="bird"></div></p><p><b>　　鳥(niǎo)運(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 主題頁(yè)面三的制作</p><p>　　頁(yè)面三

99、的時(shí)間安排在晚上，將頁(yè)面布局設(shè)定好，添加星星閃爍的效果，星星的閃爍不需要手動(dòng)觸發(fā)，也在不斷的循環(huán)變化，所以最簡(jiǎ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>　　再對(duì)運(yùn)動(dòng)軌跡進(jìn)行處理，人物走路的這個(gè)運(yùn)動(dòng)軌跡是由上橋與橋上直行的兩個(gè)動(dòng)作組成。由于人物采用background-position的關(guān)系，所以采用JS精確處理了，為了讓效果看起來(lái)更自然，在實(shí)現(xiàn)上會(huì)寫(xiě)3

104、個(gè)translate的動(dòng)畫(huà)。動(dòng)作可以分解：走到橋邊，上橋，橋上直行三個(gè)動(dòng)作構(gòu)成。</p><p>　　做好轉(zhuǎn)身效果，通過(guò)定時(shí)器模擬一個(gè)暫停的時(shí)間，這樣感覺(jué)人物會(huì)有一個(gè)等待轉(zhuǎn)身的效果?？梢酝ㄟ^(guò)增加一個(gè)rotate的樣式調(diào)用CSS3動(dòng)畫(huà)。轉(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)畫(huà)處理的原理與rotate是一樣的，區(qū)別就是抖動(dòng)動(dòng)畫(huà)是2組CSS3的animation動(dòng)畫(huà)組成。抖動(dòng)動(dòng)畫(huà)的代碼如下：</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 添加背景音樂(lè)</p><p>　　第五步再是添加背景音樂(lè)，背景音樂(lè)很簡(jiǎn)單，可以直接用HTML5的audio元素播放。在HTML5標(biāo)準(zhǔn)網(wǎng)頁(yè)里面，可以運(yùn)用audio標(biāo)簽來(lái)完成對(duì)聲音的調(diào)用及播放，使用：</p>&l

110、t;p>　　var audio = new Audio(url); //創(chuàng)建一個(gè)音頻對(duì)象并傳入地址</p><p>　　audio.loop = loop || false; //是否循環(huán)</p><p>　　audio.play(); //開(kāi)始播放</p><p>　　傳遞一個(gè)視頻的地址，創(chuàng)建一個(gè)Audio對(duì)象，設(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í)也增加了一些配置，例如正比縮放，這樣可以保持頁(yè)面布局縮放看起來(lái)不會(huì)變型。</p><p>　　4.5.9 技術(shù)總結(jié)</p><p>　　動(dòng)畫(huà)頁(yè)面所用到的主要技術(shù)是jQuery和CSS

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

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

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

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

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

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