• /  23
  • 下載費用: 9.90積分  

JavaScript程序設計案例教程第2版許旻配套教學課件PPT第9章.ppt

'JavaScript程序設計案例教程第2版許旻配套教學課件PPT第9章.ppt'
HTML5和CSS3代表了下一代的HTML和CSS技術,JavaScript語言作為目前流行的腳本語言,與HTML5密不可分,HTML5中的核心功能基本都要JavaScript語言的支持。CSS3可以設置網頁上的樣式和布局,增加網頁靜態特效,將JavaScript和CSS3結合可以創建出大量的動態特效。使用HTML5+CSS3+JavaScript技術構建網頁,使網頁樣式布局更標準、樣式更美化。知識目標了解HTML5和CSS3的新功能熟悉HTML5中的Canvas元素熟悉CSS3中的媒體查詢功能熟悉JavaScript常用插件的使用能力目標能夠熟練HTML5和CSS3的新功能編寫并美化網頁能夠熟練使用JavaScript和Canvas繪制圖形能夠熟練使用CSS3中的媒體查詢功能使網頁自適應布局能夠在HTML中插入JavaScript常用插件實現瀏覽器兼容問題4案例陳述123案例實施知識準備本章小結5課后習題5本案例使用HTML5中的canvas畫布和Javascript技術在首頁中繪制指針式動態時鐘,效果如圖9.1所示。圖9.1 指針式動態時鐘效果圖1)使用Dreamweaver將網頁“Case17.html”另存為網頁“Case19.html”,將畫布代碼添加到網頁代碼…中。2)在中…添加繪制動態時鐘代碼。你的瀏覽器不支持canvas知識點1 HTML5新功能1)簡化的文檔類型和字符編碼2)新增語義化標記,使文檔結構明確3)form表單增強功能4)實現2D繪圖的Canvas對象5)無需插件支持的視頻/音頻6)離線應用緩存7)可編輯內容、拖放【實例9-1】HTML5文檔結構應用。實例要求使用HTML5語法改寫【實例2-8】中的頁面結構。圖9.2 使用HTML5編寫的頁面圖知識點2 使用JavaScript繪制圖形JavaScript通過調用HTML5中的canvas元素來實現繪制圖形和動畫功能。1)創建canvas元素標記是HTML的新元素,它是一個矩形區域,包含width和height兩個屬性,這兩個屬性是可選的,并可以像其它標記一樣應用CSS樣式表。canvas在網頁中常用形式如下:你的瀏覽器不支持canvas知識點2 使用JavaScript繪制圖形2)使用JavaScript實現繪圖的流程畫布canvas本身不具有繪制圖形的功能,只是一個容器,所有的繪制工作需在JavaScript內部完成。使用canvas結合JavaScript繪制圖形,一般有以下步驟。(1)使用document對象的getElementById()方法獲取頁面中的畫布canvas對象。(2)創建二維的繪圖上下文對象(3)繪制圖形var canvas = document.getElementById("mycanvas");var context = canvas.getContext(“2d”);context.fillStyle="#ffdd00";context.fillRect(0,0,150,150);知識點2 使用JavaScript繪制圖形3)繪圖API提供的屬性和方法(1)設置顏色、樣式和陰影。(2)繪制矩形。(3)繪制路徑。(4)繪制圖像。(5)像素操作。(6)繪制漸變圖形。(7)繪制變換圖片。(8)繪制文本。(9)圖形組合,即把一個圖像繪制在另一個圖形之上。(10)圖形的保存與恢復?!緦嵗?-2】使用canvas元素繪制圖形。實例效果:畫面中有一個棒棒糖人,由臉和上半身軀組成,臉是圓形,其中包括帶線性漸變的矩形眼睛和笑狀弧形嘴巴,身軀由三條直線組成。初始狀態手向上,鼠標移入畫布時手向下,鼠標移出后恢復初始狀態。圖9.3 棒棒糖人初始狀態圖9.4 鼠標移入畫布時狀態圖本案例主要實現學習風采照片墻效果:在頁面內擺放15張照片,每張照片都有不同程度的旋轉,并指定旋轉的原點,其中有幾張照片初始呈模糊狀態。鼠標移入照片時,照片會以左上角為原點調整至正常的角度并放大清晰顯示,鼠標離開后,照片就恢復成原來的狀態;文字“JavaScript課程學習風采”使用CSS3動畫特性制作仿Flash遮罩。效果如圖9.5所示。并將此案例實現的網頁作為首頁圖片“學習風采”超鏈接。圖9.5 chrome瀏覽器中運行效果圖1)新建網頁“Case20-1.html”,在使用元素在…中添加15張照片,和文字“JavaScript課程學習風采”。2)在…中設置基本的樣式表,包括遮罩文字、背景墻樣式和整體的尺寸布局,鏈接顯示為塊級元素,以方便變形和布局。3)設計出隨意擺放的圖片效果。首先設置所有的鏈接默認的傾斜,并自定義變形原點,同時加入動畫過渡效果,使用CSS選擇器設置不一樣的旋轉角度,使用nth-child屬性設置參數為even(偶數)、3n(3的倍數)、5n(5的倍數)的元素樣式。4)設計鼠標劃過時,圖片調整為正常角度并放大清晰顯示,同時通過attr(title)給圖片添加說明性的內容。5)設置文本裁剪和文本顏色透明屬性,并添加文字上的光影運動,需要用keyframes來實現位置變化。6)為了能使網頁能在IE瀏覽器中正常顯示,需在頁面中加入JS插件。將下載的JS插件(js文件夾)和相關效果圖片(images-global)存放于站點文件夾中,并追加以下代碼。7)設置首頁超鏈接。將網頁“Case19.html”另存為網頁“Case20.html”,把原來中的文字刪除,替換為圖片并超鏈接于網頁“Case20-1.html”。8)將網頁“Case20.html”另存為網頁“index.html”,設置網站中所有的鏈接,代碼詳見書本配套資源。知識點3 CSS3新功能1)功能強大的選擇符。2)邊框和背景。3)文字效果。4)色彩模式。5)漸變。6)多欄布局。7)變形和過渡。-webkit-linear|radial-gradient([|],,[,]);// Webkit引擎-moz-linear-gradient([|],,[,]);//Mozilla引擎-o-linear-gradient([|],,[,]);// Opera引擎知識點3 CSS3新功能8)動畫。使用CSS3可以創建動畫關鍵幀,對關鍵幀動畫設置播放時間、播放次數、播放方向等,實現更加復雜、靈活的動畫,并可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。其中,表示動畫的名稱,必須定義一個動畫名稱,方便與動畫屬性animation綁定;表示動畫持續時間的百分比,也可以是from和to,from對應的是0%,to對應的是100%,建議使用百分比;表示設置一個或多個合法的樣式屬性。9)媒體查詢。提供豐富的媒體查詢功能,可以根據不同的設備、不同的屏幕尺寸來自動調整頁面布局。也可為網頁中不同的對象設置不同的瀏覽設備。@keyframes{}}【實例9-3】 使用CSS3新增屬性實現導航欄。 圖9.7 CSS3新增屬性應用效果圖【實例9-4】 CSS3動畫。 圖9.8 CSS3動畫效果圖知識點4 媒體查詢@media規則是包含有查詢表達式的媒體樣式表定義規則。語法如下:@media::[[',' ]*]?:[only | not]? [and ]* | [and ]*:'('[:]?')'知識點4 媒體查詢頁面中引入媒體類型方法也有多種,第一種和第四種是在項目制作中是常用的方法:1)link方法引入2)xml方式引入3)@import方式引入4)@media引入 @import url("css/reset.css") screen and (width:800px);@media screen{ 選擇器{屬性:屬性值;}} @import url("css/style.css") all; 【實例9-5】使用Media Queries媒體查詢實現多種設備的樣式表方案。圖9.9 width小于660px運行圖圖9.10 width介于660px-1000px運行圖圖9.11 width大于1000px運行圖知識點5 JavaScript插件JavaScript插件有很多種,用戶也可以自己開發js插件,插件里面就是一個或多個函數的組合,只需要將一些能實現某些功能的代碼做成函數,再將這些函數全部放在一個js文件里面,到需要用的時候直接調用這個js文件里面的方法即可。 本章節主要介紹HTML5和CSS3的新增功能,重點介紹了使用HTML5中的canvas元素和JavaScript繪制圖形,使用CSS3中的Media Queries實現自適應屏幕響應,以及在網頁中插入JavaScript插件。通過本章節的學習,讀者可以結合使用HTML5、CSS3技術和JavaScript技術構建標準布局、精美樣式和動態效果的網頁。(1) 使用HTML5中的canvas實現如圖9.12的效果。(2)使用CSS3實現如圖9.13的效果。 (3) 使用CSS3實現如圖9.14的進度條。圖9.12 canvas應用效果圖圖9.13 CSS3變形效果圖圖9.14 進度條效果圖
關 鍵 詞:
教學 程序設計 配套 教程 案例 ppt javascript
 天天文庫所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
關于本文
本文標題:JavaScript程序設計案例教程第2版許旻配套教學課件PPT第9章.ppt
鏈接地址: http://www.476824.live/p-51617500.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服點擊這里,給天天文庫發消息,QQ:1290478887 - 聯系我們

本站為“文檔C2C交易模式”,即用戶上傳的文檔直接賣給(下載)用戶,本站只是中間服務平臺,本站所有文檔下載所得的收益歸上傳人(含作者)所有【成交的100%(原創)】。本站是網絡服務平臺方,若您的權利被侵害,侵權客服QQ:1290478887 歡迎舉報。

[email protected] 2017-2027 http://www.476824.live 網站版權所有

粵ICP備19057495號 

收起
展開
球探网即时蓝球比分 b股上证指数代码 11选5前三组选万能6码 941汇配资 平特肖公式大全官方 澳洲快乐8开奖软件 新城控股股票今日股 七星彩排列五规律表 彩票天津11选5在哪买 吉林快3遗漏数据查询 股票配资广州