基本介紹
- 書名：JavaScript+jQuery網頁特效設計實例教程
- 作者：陳承歡
- 出版社：人民郵電出版社
- 出版時間：2013年10月
圖書簡介,主要內容,
圖書簡介
本書是網頁特效設計項目化教材。 本書將網頁特效分為9類，分別是基本網頁特效、日期時間類網頁特效、文字類網頁特效、圖片類網頁特效、表單控制項類網頁特效、導航選單類網頁特效、選項卡類網頁特效、內容展開與摺疊類網頁特效和頁面類網頁特效，同時相應地將全書分為9個教學單元，每個教學單元分析和設計一種類型的網頁特效，同時將JavaScript和jQuery的相關知識合理地安排到各個教學單元。 本書可以作為普通高等院校、高等或中等職業院校和高等專科院校各專業網頁特效設計課程的教材，也可以作為網頁特效設計的培訓用書及技術用書。
主要內容
目 錄
單元1 設計基本網頁特效 1
任務1-1 JavaScript實現動態載入網頁內容 1
任務1-2 jQuery實現網頁收藏 3
1.1 JavaScript簡介 4
1.2 JavaScript主要的語法規則 5
1.3 JavaScript常用的開發工具 5
1.4 在HTML文檔中嵌入JavaScript代碼的方法 6
1.5 JavaScript的注釋 6
1.6 JavaScript的數據類型 7
1.7 JavaScript的常量 8
1.8 JavaScript的變數 9
1.9 JavaScript的訊息框 11
1.10 JavaScript的異常處理 11
1.11 JavaScript庫 13
1.12 下載和替代jQuery庫 13
1.13 jQuery簡介 14
任務1-3 JavaScript實現關閉網頁時彈出小視窗 15
任務1-4 JavaScript實現動態改變樣式檔案 16
任務1-5 JavaScript實現動態改變網頁字型大小及關閉網頁視窗 17
任務1-6 JavaScript實現播放Flash動畫 19
任務1-7 JavaScript實現設為主頁 20
任務1-8 jQuery實現動態設定頁面的寬度和高度 20
任務1-9 利用外部JS檔案動態輸出網頁內容 22
任務1-10 巧用CSS實現下拉選單 22
單元2 設計日期時間類網頁特效 25
任務2-1 顯示常規格式的當前日期與時間 25
任務2-2 採用多種方式顯示當前的日期 26
2.1 JavaScript的運算符與表達式 29
2.2 JavaScript的語句及其規則 31
2.3 JavaScript的條件語句 32
2.4 JavaScript的函式 36
2.5 JavaScript的String(字元串)對象 39
2.6 JavaScript的Math(數學)對象 40
2.7 JavaScript的Date(日期)對象 40
2.8 JavaScript的計時方法 42
2.9 JavaScript的RegExp對象及其方法 43
2.10 支持正則表達式的String對象的方法 48
2.11 JavaScript和jQuery的使用比較 51
任務2-3 不同的節日顯示對應的問候語 52
任務2-4 在特定日期的特定時段顯示打折促銷信息 52
任務2-5 不同時間段顯示不同的問候語 53
任務2-6 一周內每天輸出不同的圖片 54
任務2-7 實現線上考試倒計時 55
任務2-8 顯示限定格式的日期 57
任務2-9 驗證日期的有效性 58
任務2-10 實現限時搶購倒計時 60
單元3 設計文字類網頁特效 62
任務3-1 JavaScript實現滾動網頁標題欄中的文字 62
任務3-2 jQuery實現向上滾動網站促銷公告 63
3.1 JavaScript的循環語句 65
3.2 HTML DOM（文檔對象模型） 71
3.3 JavaScript的位置與尺寸方法 75
3.4 jQuery的選擇器 82
3.5 jQuery的鏈式操作 83
3.6 jQuery的效果方法 83
任務3-3 JavaScript實現網頁狀態欄中的文字呈現打字效果 91
任務3-4 JavaScript實現網頁文字滾動與等待的交替效果 92
任務3-5 JavaScript實現滑鼠滑過動態改變顯示內容及外觀效果 93
任務3-6 JavaScript實現文本圍繞滑鼠旋轉 95
任務3-7 jQuery實現網站動態信息滾動與等待的交替效果 97
任務3-8 JavaScript實現網站公告信息連續向上滾動 98
任務3-9 jQuery實現循環滾動網頁中的文字 99
單元4 設計圖片類網頁特效 102
任務4-1 JavaScript實現縱向焦點圖片輪換 102
任務4-2 jQuery實現帶左右按鈕控制焦點圖片切換 106
4.1 JavaScript的對象 109
4.2 jQuery的文檔操作方法 112
任務4-3 JavaScript實現控制網頁中的圖片尺寸 115
任務4-4 JavaScript實現限制圖片尺寸與滑動滑鼠滾輪調整圖片尺寸 115
任務4-5 JavaScript實現網頁中圖片連續向上滾動 117
任務4-6 JavaScript實現具有濾鏡效果的橫向焦點圖片輪換 118
任務4-7 JavaScript實現具有手風琴效果的橫向焦點圖片輪換 122
任務4-8 JavaScript實現帶縮略圖且雙向移動的橫向焦點圖輪換 125
任務4-9 JavaScript實現隨滾動條的滑塊移動上下滑動圖片 127
任務4-10 jQuery實現圖片縱向移動的焦點圖片輪換 129
任務4-11 jQuery實現具有濾鏡效果的橫向焦點圖片輪換 131
任務4-12 jQuery實現滑鼠滑過圖片時預覽大圖 134
任務4-13 jQuery實現單擊箭頭按鈕切換圖片 136
任務4-14 JavaScript實現圖片連續向左滾動 138
任務4-15 JavaScript實現通用橫向焦點圖片輪換 139
任務4-16 jQuery實現圖片縱向切換 142
任務4-17 jQuery實現自動與手動均可切換的焦點圖片輪換 143
任務4-18 jQuery實現單擊左右箭頭實現圖片滾動效果 146
單元5 設計表單控制項類網頁特效 149
任務5-1 實現註冊表單中的網頁特效 149
任務5-2 實現反饋意見表單中的網頁特效 156
5.1 JavaScript的事件 158
5.2 JavaScript的事件方法 161
5.3 jQuery的事件方法 161
任務5-3 JavaScript實現信箱自動導航 163
任務5-4 JavaScript實現從自定義列表框中選擇商品類型 165
任務5-5 JavaScript實現獲取表單控制項的設定值 167
任務5-6 jQuery實現自定義列表框與單擊清空輸入框內容 171
任務5-7 jQuery實現動態改變購買數量 173
任務5-8 JavaScript實現輸出列表框中被選項的文本內容 175
任務5-9 JavaScript實現利用列表框切換網頁 176
任務5-10 jQuery實現驗證頁面頁碼 177
單元6 設計導航選單類網頁特效 179
任務6-1 套用className和display等屬性實現橫向下拉選單 179
任務6-2 套用jQuery的hover事件和addClass等方法實現橫嚮導航選單 182
任務6-3 套用jQuery的bind和attr等方法實現縱嚮導航選單 184
6.1 JavaScript的this指針 186
6.2 jQuery的屬性操作方法 187
6.3 jQuery的CSS操作方法 187
任務6-4 套用JavaScript的onmouseover等事件和className屬性設計橫嚮導航選單 188
任務6-5 套用DOM的getElementById和className屬性設計橫嚮導航選單 190
任務6-6 套用jQuery的hover事件和CSS方法設計橫嚮導航選單 192
任務6-7 套用jQuery的find和animate等方法設計橫嚮導航選單 194
任務6-8 套用jQuery的one和each等方法設計複雜導航選單 197
任務6-9 套用HTML元素的樣式屬性設計橫向下拉選單 200
任務6-10 套用jQuery的show和hide等方法設計縱嚮導航選單 201
任務6-11 套用jQuery的slideDown和slideUp等方法設計有滑動效果的橫向下拉選單 203
任務6-12 套用jQuery的slideDown和fadeOut等方法設計下拉選單 204
單元7 設計選項卡類網頁特效 206
任務7-1 套用setInterval函式和display屬性實現選項卡的手動切換和自動切換 206
任務7-2 套用jQuery的index和find等方法實現橫向選項卡 209
7.1 JavaScript的數組對象 210
7.2 JSON及其使用 211
任務7-3 套用DOM的className和style等屬性設計縱向選項卡 213
任務7-4 套用DOM的className和style等屬性設計橫向選項卡 215
任務7-5 套用DOM的parentNode屬性和JSON設計縱向選項卡 218
任務7-6 套用仿jQuery的attr方法設計橫向選項卡 220
任務7-7 套用JavaScript的push和jQuery的animate等方法設計橫向選項卡與圖文滾動特效 223
任務7-8 套用jQuery的each和css方法設計縱向選項卡 225
任務7-9 套用DOM的getElementById和className等屬性設計橫向選項卡 227
任務7-10 套用jQuery的mouseover和show等方法設計橫向選項卡 229
單元8 設計內容展開與摺疊類網頁特效 231
任務8-1 套用jQuery的each和hasClass等方法設計網頁內容摺疊與展開特效 231
任務8-2 套用jQuery的toggle和css等方法實現網頁內容多層摺疊與展開特效 233
8.1 BOM(瀏覽器對象模型) 235
8.2 jQuery的尺寸方法 239
任務8-3 套用DOM的onclick事件和parentNode屬性設計網頁內容摺疊與展開特效 239
任務8-4 套用JavaScript的getElementsByTagName和className等方法或屬性設計網頁內容摺疊與展開特效 241
任務8-5 套用jQuery的bind和css等方法設計網頁內容摺疊與展開特效 243
任務8-6 套用jQuery的slideUp和slideDown等方法設計網頁內容摺疊與展開特效 245
任務8-7 套用DOM的getElementById方法和className屬性設計網頁內容摺疊與展開特效 247
任務8-8 套用jQuery的hover和click事件設計網頁內容摺疊與展開特效 249
任務8-9 套用jQuery的toggle和hasClass方法設計網頁內容摺疊與展開特效 251
任務8-10 套用jQuery的data和animate等方法設計網頁內容摺疊與展開特效 252
單元9 設計頁面類網頁特效 255
任務9-1 實現頁面換膚網頁特效 255
任務9-2 根據日期特徵動態切換背景 260
9.1 正確使用cookie 265
9.2 正確區分jQuery對象和DOM對象 267
任務9-3 根據螢幕寬度自動設定網頁背景和導航欄 267
任務9-4 頁面快捷導航選單的顯示與隱藏 269
任務9-5 下拉視窗的打開與自動隱藏 271
任務9-6 滾動螢幕時隱藏或顯示返回頂部導航欄 274
任務9-7 選購商品時打開購物車頁面 275
任務9-8 動態切換頁面背景與調整頁面大小 276
任務9-9 浮動框架的高度自適應頁面內容的高度 277
任務9-10 隨著螢幕高度變化隱藏或顯示返回頂部導航欄 278
任務9-11 促銷信息的顯示與隱藏 279
附錄A jQuery的常用方法 282
A.1 jQuery的核心函式 282
A.2 jQuery的選擇器 282
A.3 jQuery的遍歷方法 284
A.4 jQuery的事件方法 285
A.5 jQuery的效果方法 287
A.6 jQuery的文檔操作方法 288
A.7 jQuery的DOM元素方法 289
A.8 jQuery的屬性操作方法 289
A.9 jQuery的CSS操作方法 289
A.10 jQuery的尺寸方法 290
A.11 jQuery的數據操作方法 290
A.12 jQuery的AJAX操作方法 291
參考文獻 292
