JAVASCRIPT網(wǎng)頁特效范例寶典

第1章　窗口/框架與導航條設計　1
1.1　彈出窗口控制　2
實例001　打開新窗口顯示廣告信息　2
實例002　定時打開窗口　4
實例003　通過按鈕創(chuàng)建窗口　5
實例004　自動關閉的廣告窗口　6
實例005　控制彈出窗口居中顯示　7
實例006　彈出的窗口之Cookie控制　9
實例007　為彈出的窗口加入關閉按鈕　11
實例008　關閉彈出窗口時刷新父窗口　12
實例009　關閉IE主窗口時，不彈出詢問對話框　13
1.2　彈出網(wǎng)頁對話框　14
實例010　彈出網(wǎng)頁模式對話框　14
實例011　彈出全屏顯示的網(wǎng)頁模式對話框　16
實例012　網(wǎng)頁拾色器　18
實例013　日期選擇器　21
1.3　窗口的動畫效果　26
實例014　頁面自動滾動　26
實例015　打開窗口特殊效果　27
實例016　動態(tài)顯示窗口　29
實例017　慢慢放大的窗口　30
實例018　下降式瀏覽器　32
實例019　旋轉(zhuǎn)的窗口　33
實例020　移動的窗口　34
實例021　震動的窗口　35
實例022　彈出廣告窗口　36
1.4　窗口控制　37
實例023　窗口始終在最上面　38
實例024　窗口的最小化、最大化　39
實例025　頻道方式窗口　41
實例026　全屏顯示　42
實例027　設置窗口大小和位置　43
實例028　刷新當前頁　44
實例029　自動最大化　45
實例030　自定義導航控制面板　46
實例031　根據(jù)用戶分辨率自動調(diào)整窗口　48
1.5　窗口的其他效果　49
實例032　打開窗口時顯示對話框　50
實例033　使窗口背景透明　50
實例034　立體窗口　52
實例035　動態(tài)標題欄　53
實例036　固定大小的窗口　54
1.6　框架的應用　55
實例037　框架集的嵌套　56
實例038　在網(wǎng)頁中應用浮動框架　58
實例039　創(chuàng)建空白框架　60
實例040　居中顯示框架頁　62
1.7　無邊框窗口　63
實例041　全屏顯示無邊框有滾動條的窗口　63
實例042　應用CSS+DIV實現(xiàn)指定尺寸無邊框無滾動條窗口　65
實例043　應用JavaScript實現(xiàn)指定尺寸無邊框無滾動條窗口　67
1.8　水平導航條應用　69
實例044　圖片按鈕導航條　69
實例045　導航條的動畫效果　71
實例046　不用圖片實現(xiàn)質(zhì)感導航條　72
1.9　下拉菜單式導航條　73
實例047　二級導航菜單　74
實例048　半透明背景的下拉菜單　76
實例049　展開式導航條　80
實例050　用層制作下拉菜單1　81
實例051　用層制作下拉菜單2　84
1.10　側導航條設計　86
實例052　自動隱藏式菜單　87
實例053　收縮式導航菜單　89
實例054　樹狀導航菜單　91
第2章　表單及表單元素　95
2.1　文本框/編輯框/隱藏域組件　96
實例055　獲取文本框/編輯框/隱藏域的值　96
實例056　自動計算金額　97
實例057　設置文本框的只讀屬性　98
實例058　限制多行文本域輸入的字符個數(shù)　100
實例059　自動選擇文本框/編輯框中的文字　102
實例060　按下回車鍵時自動切換焦點　103
2.2　下拉列表/菜單　104
實例061　獲取下拉列表/菜單的值　104
實例062　遍歷多選擇下拉列表　105
實例063　在下拉列表中進行多選移除　106
實例064　將數(shù)組中的數(shù)據(jù)添加到下拉菜單中　107
實例065　應用下拉菜單選擇所要聯(lián)機的網(wǎng)站　108
實例066　多級級聯(lián)菜單　110
實例067　可以輸入文字的下拉菜單　111
實例068　根據(jù)下拉菜單的值顯示不同控件　112
實例069　分級下拉列表　113
2.3　單選按鈕組　114
實例070　不提交表單獲取單選按鈕的值　114
實例071　選中單選按鈕后顯示其他表單元素　116
實例072　通過單選按鈕控制其他表單元素是否可用　117
2.4　復選框　117
實例073　不提交表單獲取復選框的值　118
實例074　控制復選框的全選或反選　118
實例075　只有一個復選框時控制復選框的全選或反選　119
2.5　密碼域　120
實例076　讓您的密碼域更安全　120
實例077　不提交表單自動檢測密碼域是否相同　121
2.6　表單應用　122
實例078　通過JavaScript控制表單的提交與重置　122
實例079　帶記憶功能的表單　123
實例080　防止表單重復提交　124
實例081　自動提交表單　125
實例082　通過for循環(huán)獲取表單元素的中文名稱　126
實例083　可以提交到不同處理頁的表單　127
第3章　實用JavaScript函數(shù)　129
3.1　數(shù)據(jù)驗證　130
實例084　通過正則表達式驗證日期　130
實例085　驗證輸入的日期格式是否正確　132
實例086　檢查表單元素是否為空　134
實例087　驗證E-mail是否正確　135
實例088　通過正則表達式驗證電話號碼　137
實例089　驗證輸入的字符串是否為漢字　139
實例090　驗證身份證號碼　140
實例091　驗證用戶名和密碼　142
實例092　驗證車牌號碼　144
實例093　驗證網(wǎng)站地址　145
實例094　驗證數(shù)量和金額　147
實例095　驗證字符串是否以指定字符開頭　149
實例096　限制輸入字符串的長度　150
3.2　字符串處理　152
實例097　小寫金額轉(zhuǎn)換為大寫金額　152
實例098　去除字符串中的空格　155
實例099　轉(zhuǎn)換輸入文本中的回車和空格　156
實例100　將數(shù)字字符串格式化為指定長度　158
實例101　把一個長數(shù)字分位顯示　159
實例102　將RGB格式的顏色值轉(zhuǎn)換為十六進制格式　161
實例103　將IP地址轉(zhuǎn)換為對應的數(shù)值　163
實例104　從指定URL中提取文件名　164
3.3　隨機函數(shù)　166
實例105　隨機產(chǎn)生指定位數(shù)的驗證碼　166
實例106　生成隨機字符串　167
3.4　日期與時間　169
實例107　顯示長日期格式的系統(tǒng)日期　169
實例108　實時顯示系統(tǒng)時間　171
第4章　日期和時間　173
4.1　日期時間顯示　174
實例109　在標題欄中顯示日期時間　174
實例110　使用toLocaleString()方法獲取本地時間　176
實例111　全中文顯示日期　176
實例112　在狀態(tài)欄中顯示日期時間　178
實例113　使用數(shù)組顯示星期　179
實例114　在表格中顯示時間　180
實例115　退出頁面時顯示停留時間　181
實例116　顯示用戶在頁面的停留時間　182
實例117　顯示最后修改時間　183
4.2　日期時間算法　184
實例118　計算某一天是星期幾　184
實例119　判斷指定年份是否為閏年　186
實例120　計算從出生到現(xiàn)在度過的時間　187
實例121　返回兩個日期之間的間隔小時　188
實例122　倒計時　190
實例123　訪問時間限制　191
實例124　計步器　192
4.3　日期時間特效　194
實例125　分時問候　194
實例126　節(jié)日提示　195
實例127　倒影時鐘　196
實例128　帶陰影的時鐘　199
實例129　動態(tài)石英鐘　200
實例130　生日提醒器　203
實例131　數(shù)字時鐘　205
實例132　各地時間表　206
實例133　位于頁面頂層的時鐘　209
第5章　文字特效　213
5.1　文字的顏色變換　214
實例134　簡單文字變色　214
實例135　文字變色　215
實例136　變換的文字　216
實例137　描邊文字　217
實例138　霓虹燈文字　218
實例139　追逐點亮的文字　219
實例140　螢光文字　220
實例141　發(fā)光文字的閃爍效果　221
實例142　文字的舞臺燈光效果　223
實例143　制作彩色漸變文字動畫　224
5.2　改變文字大小　226
實例144　文字伸縮　226
實例145　動蕩的文字　227
實例146　文字伸展　228
實例147　文字逐個放大　230
實例148　自動改變大小　231
實例149　選擇字體的大小　232
5.3　文字顯示效果　234
實例150　文字漸隱漸現(xiàn)　234
實例151　文字虛幻變化　235
實例152　文字虛幻抖動　237
5.4　指定文字位置　238
實例153　將文字置于工作區(qū)左上角　238
實例154　右上角文字　239
實例155　鼠標移動文字　241
5.5　文字動態(tài)移動　242
實例156　文字自動滾屏　242
實例157　文字上下滾動　243
5.6　文字立體效果　244
實例158　文字的旋轉(zhuǎn)　244
實例159　立體旋轉(zhuǎn)文字　246
實例160　文字3D效果　248
5.7　文字動畫效果　249
實例161　反彈文字　249
實例162　飛舞的文字　252
實例163　飛翔的文字　254
實例164　平面旋轉(zhuǎn)的文字　257
實例165　輸出文字　258
實例166　文字打字效果　259
實例167　文字抖動　261
實例168　指向文字時飛出星形標記　262
實例169　文字的拋出效果　264
5.8　文字特殊效果　265
實例170　波浪文字　265
實例171　夢幻文字效果　266
實例172　屏風文字　268
實例173　文字陰影　270
5.9　其他　270
實例174　隨機顯示文字　270
實例175　文字加密及解密　271
第6章　超級鏈接特效　275
6.1　超級鏈接樣式　276
實例176　改變超級鏈接字體樣式　276
實例177　當鼠標移動到超級鏈接時改變超級鏈接顏色　277
實例178　改變超級鏈接背景色　278
6.2　超級鏈接控制　279
實例179　建立E-mail超級鏈接　280
實例180　獲取頁面中的全部超級鏈接　281
實例181　將網(wǎng)站設為首頁　282
實例182　單擊鼠標右鍵自動鏈接到指定網(wǎng)站　283
實例183　單擊超級鏈接將本頁加入收藏夾　285
實例184　訪問指定的鏈接地址　286
實例185　返回默認主頁　287
實例186　導航鏈接　289
6.3　超級鏈接特效　291
實例187　快速閃動頁面中的超級鏈接　291
實例188　滾動的超級鏈接提示信息　292
實例189　公告欄中顯示超級鏈接　294
實例190　顯示超級鏈接站點相關信息　295
實例191　顯示超級鏈接的提示信息　296
實例192　半透明背景的超級鏈接提示　297
第7章　操作表格　299
7.1　表格的顏色效果　300
實例193　閃爍的表格邊框　300
實例194　單元格邊框變色　301
實例195　選中的行變色　302
7.2　對單元格的焦點進行控制　303
實例196　選定表格中的單元格　303
實例197　左右移動單元格的信息　304
實例198　通過鍵盤使單元格焦點任意移動　306
7.3　對表格的行、列進行修改　311
實例199　動態(tài)制作表格　311
實例200　動態(tài)生成行或列　313
實例201　刪除表中的行　314
7.4　單元格的相關操作　316
實例202　隱藏及顯示單元格　316
實例203　編輯單元格中的文本信息　318
實例204　合并單元格　320
實例205　在表格中添加行及單元格　322
實例206　刪除表中的單元格　324
7.5　表格的特殊效果　325
實例207　透明表格　326
實例208　限制表格的寬度　327
實例209　表格的標題　328
實例210　表格的外陰影　329
實例211　立體表格　329
實例212　虛線邊框表格　330
實例213　表格作為分割線　332
實例214　表格向下展開　332
第8章　圖形圖像與多媒體　335
8.1　圖片大小　336
實例215　打開自定義大小的圖片　336
實例216　圖片放大縮小　337
實例217　通過鼠標滾輪放大縮小圖片　338
8.2　圖片與鼠標相關操作　339
實例218　跟隨鼠標移動的圖片　340
實例219　可以左右拖動的圖片　340
實例220　隨意拖動圖片　342
實例221　當鼠標經(jīng)過圖片時顯示圖片　344
實例222　改變圖片獲取焦點時的狀態(tài)　345
實例223　抖動的圖片　346
實例224　鼠標移動放大圖片　347
8.3　圖片與時間相關操作　349
實例225　定時隱藏圖片　349
實例226　根據(jù)時間變換頁面背景　350
實例227　使圖片不停閃爍　352
實例228　上下跳動的圖片　352
實例229　圖片左右晃動　354
實例230　飄舞的變形圖片　356
8.4　圖片的動畫效果　358
實例231　圖片翻轉(zhuǎn)效果　359
實例232　水波倒影特效　360
實例233　圖片漸隱漸現(xiàn)　361
實例234　圖片的探照燈效果　362
實例235　雷達掃描圖片特效　363
實例236　在頁面中旋轉(zhuǎn)的圖片　365
實例237　改變形狀的圖片　366
實例238　圖片在頁面浮動　367
實例239　隨機變化的網(wǎng)頁背景　369
8.5　選擇頭像　370
實例240　在列表中選擇圖片　370
實例241　在彈出的新窗口中選擇圖片　372
8.6　在頁面中播放圖片　374
實例242　幻燈片式播放圖片　374
實例243　無間斷的圖片循環(huán)滾動效果　376
8.7　圖片的其他效果　377
實例244　導航地圖　377
8.8　播放音樂　378
實例245　為網(wǎng)頁設置背景音樂　378
實例246　隨機播放背景音樂　380
實例247　MIDI音樂選擇　381
8.9　插入Flash動畫　383
實例248　插入Flash動畫　383
實例249　插入背景透明的Flash動畫　384
8.10　播放視頻文件　385
實例250　播放AVI文件　385
實例251　自制視頻播放器　387
第9章　頁面特效　391
9.1　頁面背景效果　392
實例252　背景固定居中　392
實例253　背景圖片縱向重復顯示　393
實例254　通過按鈕變換背景顏色　395
實例255　背景自動變色　396
實例256　百葉窗　396
實例257　漸隱漸顯的背景顏色　398
實例258　頁面縮小　399
實例259　頁面上下打開效果　400
實例260　頁面左右打開效果　402
實例261　頁面溶解效果　404
9.2　特殊頁面　406
實例262　頁首頁尾切換　406
實例263　調(diào)用下載頁面　408
實例264　程序加載頁面　409
實例265　顏色拾取器　411
9.3　廣告頁面　415
實例266　圖片總置于頂端　415
實例267　隨機顯示廣告　416
實例268　廣告隨滾動條漂移　418
9.4　頁面動畫效果　419
實例269　下雪　419
實例270　飄落的楓葉　421
實例271　下雨　423
實例272　背景的煙花效果　425
實例273　變色的圓圈　427
實例274　滾動的光環(huán)　429
實例275　星空極速飛入效果　430
實例276　閃爍的星星　432
9.5　其他　434
實例277　帶密碼的網(wǎng)頁　434
實例278　頁面左右滾動　435
實例279　動態(tài)移動的層　437
實例280　在頁面中顯示十字光標　438
第10章　狀態(tài)欄特效　441
10.1　狀態(tài)欄文字動畫　442
實例281　使狀態(tài)欄中的文字不停閃爍　442
實例282　文字從右向左依次彈出　443
實例283　文字從中間向兩邊展開　445
實例284　文字跑馬燈特效　447
實例285　文字依次顯示后快速收縮　449
實例286　文字的展開與收縮　451
實例287　狀態(tài)欄中的文字依次彈出　452
10.2　其他　453
實例288　在狀態(tài)欄顯示固定自定義信息　453
實例289　在狀態(tài)欄顯示鼠標坐標　454
實例290　在狀態(tài)欄顯示特定的超級鏈接信息　456
第11章　報表與打印　459
11.1　Web打印　460
實例291　調(diào)用IE自身的打印功能實現(xiàn)打印　460
實例292　打印指定框架中的內(nèi)容　461
實例293　利用WebBrowser打印　462
實例294　設置頁眉頁腳　463
11.2　利用Word打印報表　465
實例295　將頁面中的表格導出到Word并打印　465
實例296　打開指定的Word文檔并打印　467
實例297　在JSP中利用Word自動打印指定格式的會議記錄　468
實例298　在ASP中利用Word自動打印指定格式的會議記錄　470
實例299　在PHP中調(diào)用Word自動打印指定格式的會議記錄　472
11.3　利用Excel打印報表　474
實例300　將Web頁面中的數(shù)據(jù)導出到Excel　474
實例301　將Web頁面中的數(shù)據(jù)導出到Excel并自動打印　476
11.4　利用CSS樣式打印　478
實例302　利用CSS樣式打印頁面中的指定內(nèi)容　478
實例303　利用CSS樣式分頁打印　479
11.5　套打郵寄產(chǎn)品單　482
實例304　打印匯款單　482
實例305　打印快遞單　484
實例306　打印信封　485
第12章　網(wǎng)站安全　489
12.1　禁止用戶復制網(wǎng)頁內(nèi)容　490
實例307　禁止用戶復制網(wǎng)頁內(nèi)容(方法一)　490
實例308　禁止用戶復制網(wǎng)頁內(nèi)容(方法二)　491
實例309　禁止網(wǎng)頁另存為　492
12.2　禁止用戶刷新屏幕　493
實例310　屏蔽IE主菜單　493
實例311　屏蔽鍵盤相關事件　494
實例312　屏蔽鼠標右鍵　496
12.3　登錄頁面　497
實例313　具有瀏覽器檢測功能的登錄頁面　497
實例314　防止SQL注入的登錄頁面　498
實例315　帶驗證碼的登錄頁面　500
12.4　其他　501
實例316　使用Script Encoder加密工具加密　501
第13章　HTML/CSS樣式　503
13.1　頁面效果　504
實例317　統(tǒng)一站內(nèi)網(wǎng)頁風格　504
實例318　設置超級鏈接文字的樣式　508
實例319　網(wǎng)頁換膚　509
實例320　滾動文字　512
實例321　制作漸變背景　513
13.2　表格樣式　514
實例322　只有外邊框的表格　515
實例323　彩色外邊框的表格　516
實例324　控制表格指定外邊框不顯示　518
實例325　背景顏色漸變的表格　520
實例326　表格隔行變色　521
13.3　鼠標及滾動條樣式　522
實例327　顯示自定義鼠標形狀　522
實例328　動畫光標　524
實例329　制作彩色滾動條　525
13.4　文字及列表樣式　527
實例330　應用刪除線樣式標記商品特價　527
實例331　在文字上方標注說明標記　528
實例332　指定圖標的列表項　529
13.5　文字濾鏡特效　530
實例333　文字的發(fā)光效果　531
實例334　文字的陰影效果　532
實例335　文字的漸變陰影效果　533
實例336　文字的圖案填充效果　534
實例337　文字的探照燈效果　535
實例338　文字的閃爍效果　537
實例339　文字的空心效果　538
實例340　文字的浮雕效果　539
實例341　文字的陽文效果　540
實例342　文字的雪雕效果　541
實例343　火焰字　542
實例344　文字扭曲動畫　544
13.6　圖片濾鏡特效　545
實例345　圖片的半透明效果　545
實例346　圖片的模糊效果　546
實例347　圖片的水波紋特效　547
實例348　圖片的灰度效果　548
實例349　圖片的動態(tài)說明文字　549
第14章  JavaScript與XML　553
14.1　讀取XML文件　554
實例350　使用XML DOM對象讀取XML文件　554
實例351　使用XMLHttpRequest對象讀取XML文件　557
14.2　顯示XML文檔　559
實例352　使用CSS顯示XML文檔　559
實例353　使用XSL顯示XML文檔　562
實例354　使用IE XML數(shù)據(jù)島輸出XML文檔　564
14.3　操作XML　565
實例355　用JavaScript控制XML文檔的分頁顯示　565
實例356　通過操作XML數(shù)據(jù)島實現(xiàn)添加、刪除留言信息　567
第15章　JavaScript與ASP結合　573
15.1　彈出窗口/對話框控制　574
實例357　關閉彈出窗口時刷新父窗口　574
實例358　打開新窗口顯示詳細信息　575
實例359　彈出網(wǎng)頁模式對話框　577
實例360　日期選擇器　580
實例361　彈出提示對話框并重定向網(wǎng)頁　584
實例362　打開指定大小的新窗口并居中顯示　586
15.2　彈出確認對話框　588
實例363　刪除數(shù)據(jù)前彈出確認對話框　588
實例364　安全退出前彈出確認對話框　590
15.3　其他　591
實例365　遠程獲取其他網(wǎng)頁情報　591
實例366　樹狀導航菜單　594
實例367　使用XML實現(xiàn)不刷新頁面查詢數(shù)據(jù)　596
第16章　JavaScript與JSP結合　601
16.1　窗口與對話框　602
實例368　彈出提示對話框并重定向網(wǎng)頁　602
實例369　打開新窗口顯示詳細信息　604
實例370　打開指定大小的新窗口并居中顯示　605
實例371　彈出網(wǎng)頁模式對話框　607
實例372　關閉彈出窗口時刷新父窗口　609
16.2　無刷新技術　611
實例373　無刷新的用戶名檢測　611
實例374　無刷新的級聯(lián)下拉列表　614
實例375　使用XML實現(xiàn)不刷新頁面查詢數(shù)據(jù)　616
16.3　調(diào)用與控制　619
實例376　將查詢結果導出到Word　619
實例377　調(diào)用Excel　621
實例378　調(diào)用PowerPoint　622
16.4　其他　623
實例379　樹狀導航菜單　623
第17章　JavaScript與ASP.NET結合　627
17.1　窗口與對話框　628
實例380　使用JavaScript腳本彈出對話框　628
實例381　打開新窗口顯示詳細信息　629
實例382　關閉彈出窗口刷新父窗口　631
實例383　彈出網(wǎng)頁模式對話框　633
實例384　彈出全屏顯示網(wǎng)頁　635
17.2　其他　637
實例385　自動隱藏式菜單　637
第18章　JavaScript與PHP結合　641
18.1　窗口與對話框　642
實例386　彈出提示對話框并重定向網(wǎng)頁　642
實例387　關閉彈出窗口時自動刷新父窗口　643
實例388　在彈出的網(wǎng)頁模式對話框中選擇個性頭像　645
實例389　時間選擇器　647
實例390　彈出提示對話框并重定向網(wǎng)頁　649
實例391　刪除數(shù)據(jù)前彈出確認對話框　650
18.2　其他　651
實例392　樹狀導航菜單　651
第19章　綜合應用　657
19.1　計算器　658
實例393　簡單計算器　658
實例394　復雜計算器　662
19.2　日歷　667
實例395　精美日歷　668
實例396　帶農(nóng)歷的日歷　674
19.3　購物車　681
實例397　添加至購物車　682
實例398　查看購物車　684
實例399　修改商品購買數(shù)量　686
實例400　從購物車中移去指定商品　687
實例401　清空購物車　689
JavaScript程序開發(fā)范例寶典附錄　691