本書內(nèi)容包括: HTML+CSS基礎項目; JavaScript基礎項目; HTML5拖放API項目; HTML5表單API項目; HTML5畫布API項目; HTML5媒體API項目; HTML5地理定位API項目; HTML5 Web存儲API項目; CSS3項目; 綜合應用設計實例。
目 錄
第1章 HTML+CSS基礎項目 1
1.1 導航欄菜單的設計與實現(xiàn) 1
1.1.1 界面設計 1
1.1.2 鼠標事件 4
1.1.3 完整代碼展示 5
1.2 商務風格表格的設計與實現(xiàn) 6
1.2.1 創(chuàng)建表格 6
1.2.2 樣式設計 7
1.2.3 完整代碼展示 11
第2章 JavaScript基礎項目 13
2.1 電子時鐘的設計與實現(xiàn) 13
2.1.1 界面設計 13
2.1.2 時鐘動態(tài)效果的實現(xiàn) 16
2.1.3 完整代碼展示 18
2.2 電子日歷的設計與實現(xiàn) 19
2.2.1 界面設計 19
2.2.2 顯示狀態(tài)欄中的年份和月份 22
2.2.3 顯示當前月份的所有日期 23
2.2.4 按鈕控件功能的實現(xiàn) 26
2.2.5 完整代碼展示 27
第3章 HTML5拖放API項目 31
3.1 仿回收站效果的設計與實現(xiàn) 31
3.1.1 界面設計 31
3.1.2 文件拖曳與回收功能的實現(xiàn) 34
3.1.3 完整代碼展示 37
3.2 圖片相框展示的設計與實現(xiàn) 39
3.2.1 界面設計 39
3.2.2 相框自動生成功能的實現(xiàn) 41
3.2.3 完整代碼展示 46
第4章 HTML5表單API項目 49
4.1 用戶注冊頁面的設計與實現(xiàn) 49
4.1.1 界面設計 50
4.1.2 表單設計 51
4.1.3 提示與驗證功能的實現(xiàn) 54
4.1.4 完整代碼展示 58
4.2 問卷調(diào)查頁面的設計與實現(xiàn) 60
4.2.1 界面設計 61
4.2.2 表單設計 62
4.2.3 驗證功能的實現(xiàn) 69
4.2.4 完整代碼展示 73
第5章 HTML5畫布API項目 79
5.1 手繪時鐘的設計與實現(xiàn) 79
5.1.1 界面設計 79
5.1.2 實時更新效果 87
5.1.3 完整代碼展示 88
5.2 拼圖游戲的設計與實現(xiàn) 91
5.2.1 界面設計 91
5.2.2 實現(xiàn)游戲邏輯 95
5.2.3 游戲成功與重新開始 102
5.2.4 完整代碼展示 105
第6章 HTML5媒體API項目 111
6.1 音樂播放器的設計與實現(xiàn) 111
6.1.1 界面設計 111
6.1.2 媒體文件的載入 115
6.1.3 控件功能的實現(xiàn) 115
6.1.4 完整代碼展示 119
6.2 在線教學視頻的設計與實現(xiàn) 122
6.2.1 界面設計 122
6.2.2 視頻文件的載入與播放 127
6.2.3 視頻時間跳轉(zhuǎn)的實現(xiàn) 128
6.2.4 完整代碼展示 130
第7章 HTML5地理定位API項目 133
7.1 運動數(shù)據(jù)記錄頁面的設計與實現(xiàn) 133
7.1.1 界面設計 134
7.1.2 實時監(jiān)控地理定位 135
7.1.3 開始與結束按鈕的切換 136
7.1.4 計算與顯示距離 138
7.1.5 完整代碼展示 140
7.2 運動軌跡繪制頁面的設計與實現(xiàn) 144
7.2.1 界面設計 144
7.2.2 開始與結束按鈕的切換 146
7.2.3 繪制地圖與運動軌跡 146
7.2.4 計時功能的實現(xiàn) 151
7.2.5 完整代碼展示 153
第8章 HTML5 Web存儲API項目 157
8.1 基于Web存儲技術的網(wǎng)頁主題設置 157
8.1.1 界面設計 157
8.1.2 重置網(wǎng)頁主題顏色的實現(xiàn) 160
8.1.3 加載網(wǎng)頁主題顏色的實現(xiàn) 162
8.1.4 完整代碼展示 163
8.2 基于Web存儲技術的網(wǎng)頁日志本 165
8.2.1 界面設計 165
8.2.2 讀取日志功能的實現(xiàn) 168
8.2.3 保存日志功能的實現(xiàn) 169
8.2.4 刪除日志功能的實現(xiàn) 170
8.2.5 完整代碼展示 171
第9章 CSS3基礎項目 175
9.1 使用CSS3文本陰影制作特殊字體效果 175
9.1.1 整體設計 175
9.1.2 火焰文字效果的實現(xiàn) 177
9.1.3 霓虹文字效果的實現(xiàn) 178
9.1.4 完整代碼展示 179
9.2 使用CSS3動畫制作響應式放大菜單 180
9.2.1 整體設計 180
9.2.2 動畫效果的實現(xiàn) 182
9.2.3 完整代碼展示 183
第10章 綜合應用設計實例 185
10.1 基于HTML5的貪吃蛇游戲的設計與實現(xiàn) 185
10.1.1 貪吃蛇游戲簡介 185
10.1.2 界面布局設計 185
10.1.3 數(shù)據(jù)模型設計 190
10.1.4 游戲的邏輯實現(xiàn) 192
10.1.5 完整代碼展示 203
10.2 實戰(zhàn)項目——企業(yè)文化用品展示網(wǎng)頁的開發(fā) 207
10.2.1 項目簡介 207
10.2.2 整體布局設計 208
10.2.3 頁眉和頁腳的實現(xiàn) 210
10.2.4 主體內(nèi)容的實現(xiàn) 212
10.2.5 完整代碼展示 225
HTML5拖放API項目
本章主要包含兩個基于HTML5拖放API的應用設計實例，一是仿回收站效果的設計與實現(xiàn)，二是圖片相框展示的設計與實現(xiàn)。在仿回收站項目中，主要難點為元素的拖曳以及回收效果；在圖片相框展示項目中，主要難點為文件的拖曳、自動生成帶有相框的圖片以及顯示圖片文件信息的技術。
本章學習目標：
* 學習如何綜合應用HTML5拖放API、CSS與JavaScript開發(fā)仿回收站效果；
* 學習如何綜合應用HTML5拖放API、CSS與JavaScript開發(fā)圖片相框展示效果。
3.1 仿回收站效果的設計與實現(xiàn)
【例3-1】 基于HTML5拖放API的仿回收站效果的設計與實現(xiàn)
背景介紹：在Windows等操作系統(tǒng)中均包含回收站功能，用戶可以直接將不需要的文件拖曳并放置到桌面回收站圖標上以實現(xiàn)文件的刪除。
功能要求：使用HTML5拖放API相關技術在網(wǎng)頁上實現(xiàn)仿回收站的類似效果。用戶通過拖曳可以將頁面上的元素放置到回收站中刪除。效果如圖3-1所示。
書單推薦
