




版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領
文檔簡介
JavaScript語言與Ajax應用(第二版)主編董寧陳丹中國水利水電出版社第8章
利用JavaScript實現(xiàn)動畫效果8.1動畫效果的用途8.2構建動畫對象8.3擴展動畫對象8.4利用JavaScript庫實現(xiàn)動畫效果04二月2023JavaScript語言與Ajax應用(第二版)28.1動畫效果的用途在Web應用頁面設計中,動畫效果有時候會被認為華而不實,尤其是在被濫用的時候。但恰如其分的動畫效果對頁面設計是很有幫助的,而且動畫效果還被用來提示用戶頁面上發(fā)生的事件。在傳統(tǒng)的Web應用頁面設計中,用戶在頁面上執(zhí)行的操作都是有反饋的。單擊一個提交按鈕或單擊一個鏈接,瀏覽器都會給出正在提交或正在跳轉(zhuǎn)的提示,直到頁面加載完畢。但是在引入Ajax技術之后,頁面就可能在不刷新的情況從Web服務器獲取數(shù)據(jù),這時候就需要一種方式告訴用戶執(zhí)行了什么動作,或者正在執(zhí)行什么動作。04二月2023JavaScript語言與Ajax應用(第二版)38.1動畫效果的用途提示性的動畫效果告訴用戶,當前頁面還在聽話的運行著,沒有出現(xiàn)任何的錯誤。動畫效果還適合用來展示或隱藏信息。如果只是簡單的改變一些頁面元素的可見性,用戶很可能會忽略頁面上發(fā)生的情況。如果在改變頁面元素可見性的同時給元素加上動畫效果,用戶這馬上能發(fā)現(xiàn)頁面的改變,并且把自己的操作和這些改變聯(lián)系起來。適當?shù)膭赢嬓Ч€可以改善用戶的瀏覽體驗04二月2023JavaScript語言與Ajax應用(第二版)48.2構建動畫對象8.2.1回調(diào)8.2.2動畫隊列04二月2023JavaScript語言與Ajax應用(第二版)58.2.1回調(diào)對于動畫效果,我們需要關注3個時刻:動畫效果開始:此時可以執(zhí)行一些與動畫效果開始相關的任務,比如在此時改變某個圖片的顯示。動畫效果的每一步:此時可以執(zhí)行代碼跟蹤動畫效果相關元素的狀態(tài),也可以檢測動畫效果元素之間是否有交錯。動畫結束:此時可以執(zhí)行一些元素操作或開始Ajax調(diào)用之類的代碼。04二月2023JavaScript語言與Ajax應用(第二版)68.2.2動畫隊列動畫隊列也就是按順序執(zhí)行的一組動畫效果。04二月2023JavaScript語言與Ajax應用(第二版)78.3擴展動畫對象在Effect動畫效果對象的基礎上,我們可以針對不同的頁面效果要求擴展出對應的動畫效果類。接下來我們來創(chuàng)建一個新聞列表頁面,頁面上的內(nèi)容按照新聞標題→內(nèi)容→新聞標題→內(nèi)容的順序依次排列下來。04二月2023JavaScript語言與Ajax應用(第二版)88.4利用JavaScript庫實現(xiàn)動畫效果8.4.1jQuery8.4.2ExtJS04二月2023JavaScript語言與Ajax應用(第二版)98.4.1jQueryjQuery是一個極其精簡并且高效的庫,我們可以使用它來快速完成許多動畫效果。jQuery庫提供的方法鏈非常適合用來快速添加動畫效果,把任何一個獲取到的DOM元素交給動畫效果對象就可以了。04二月2023JavaScript語言與Ajax應用(第二版)108.4.2ExtJSExtJS是一套完整的界面部件庫,它提供了構建富客戶端Web應用程序所需要的全部功能。同時ExtJS庫也提供了Ext.Fx對象,專門用于實現(xiàn)各種動畫效果。同jQuery庫一樣ExtJS庫也適合用來快速添加動畫效果,把任何一個獲取到的DOM元素交給動畫效果對象就可以了。04二月2023JavaScript語言與Ajax應用(第二版)11
本章小結本章主要說明了如何利用JavaScript實現(xiàn)頁面上的動畫效果,并且重點介紹了JavaScript動畫對象的構建過程。通過本章,希望讀者能夠了解利用JavaScript實現(xiàn)頁面動畫的原理,并能夠在Web應用開發(fā)中自己構建JavaScript對象來實現(xiàn)所需的動畫效果。本章最后重點講解了兩個典型的JavaScript庫jQuery與ExtJS在動畫效果的實現(xiàn)上提供的便捷方法。在對jQuery與ExtJS庫動畫效果的舉例說明中只涉及到了常用
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 職場技能提升的長期規(guī)劃計劃
- 幼兒園社會責任教育工作規(guī)劃計劃
- 跨境電商平臺的品牌營銷實戰(zhàn)案例
- 長期照護腦血管病患者的持續(xù)康復
- 2025年02月山西省事業(yè)單位公開招聘筆試歷年典型考題(歷年真題考點)解題思路附帶答案詳解
- 江蘇專用2025版高考數(shù)學二輪復習專題五解析幾何第3講直線圓與橢圓的綜合運用學案文蘇教版
- 山東專用2025版高考歷史大一輪復習第9講古代希臘的民主政治和羅馬法律夯基提能作業(yè)含解析
- 浙江專用2025版高考地理大三輪復習12選擇題專練十二
- 工作安全教育個人總結報告(22篇)
- 音樂創(chuàng)作中的數(shù)學和諧與節(jié)奏分析
- 7.2.1 圓柱(課件含動畫演示)-【中職】高一數(shù)學(高教版2021基礎模塊下冊)
- 《義務教育數(shù)學課程標準(2022年版)》測試題+答案
- 便利店門店運營手冊
- 江蘇省南通市海安中學2025屆高一下生物期末綜合測試試題含解析
- 《行政倫理學教程(第四版)》課件 第1、2章 行政倫理的基本觀念、行政倫理學的思想資源
- 拆除工程施工拆除進度安排
- 絕緣技術監(jiān)督上崗員:廠用電設備技術監(jiān)督考試資料一
- 衛(wèi)生監(jiān)督村醫(yī)培訓課件
- 動物的感覺器官
- 獵頭項目方案
- 2024年家庭教育指導師考試(重點)題庫及答案(含各題型)
評論
0/150
提交評論