利用JavaScript制作網(wǎng)頁特效課件

1、利用JavaScript制作網(wǎng)頁特效利用JavaScript可以輕松制作網(wǎng)頁特效，如可以制作顯示當前時間、跟隨鼠標的文字。本章就來介紹利用JavaScript制作時間特效、圖像特效、窗口特效、鼠標特效和其他一些常見特效的方法。利用JavaScript制作網(wǎng)頁特效掌握時間特效的應用 掌握圖像特效的應用 掌握窗口特效的應用 掌握鼠標特效的應用 掌握其他特效的應用 利用JavaScript制作網(wǎng)頁特效在網(wǎng)頁中經(jīng)?？梢钥吹礁鞣N各樣的動態(tài)時間顯示，在網(wǎng)頁中合理地使用時間可以增加網(wǎng)頁的時效感。下面通過實例講述時間特效的制作。利用JavaScript制作網(wǎng)頁特效在很多的網(wǎng)頁上都顯示當前的時間，下面利用get

2、Hours()、getMinutes()、getSeconds()分別獲得當前小時數(shù)、獲得當前分鐘數(shù)、獲得當前秒數(shù)，然后給時間變量timer賦值，最后在文本框中顯示當前時間。 16.1.1 16.1.1 顯示當前時間顯示當前時間利用JavaScript制作網(wǎng)頁特效首先定義一個星期數(shù)組initArray()，然后利用getYear()、getMonth()、getDate()、getDay()分別獲得當前年份、獲得當前月份、獲得當前日數(shù)、獲得當前星期。16.1.2 16.1.2 顯示當前日期顯示當前日期利用JavaScript制作網(wǎng)頁特效16.1.3 16.1.3 顯示網(wǎng)頁停留時間顯示網(wǎng)頁停留時

3、間顯示網(wǎng)頁停留時間也是一種常見的網(wǎng)頁特效。首先用定義一個表單，然后在表單內(nèi)使用標記定義一個文本框，然后定義一個function update()函數(shù)計算停留時間，最后利用“document.forms.input1.value=hour+時+min+分+sec+秒”在文本框中顯示停留時間 。利用JavaScript制作網(wǎng)頁特效16.1.4 16.1.4 制作倒計時特效制作倒計時特效倒計時特效可以讓用戶明確知道到某個日期剩余的時間，制作倒計時特效的具體操作步驟如下。利用JavaScript制作網(wǎng)頁特效圖像是文本的解釋和說明，在網(wǎng)頁中的適當位置放置一些圖像，不僅可以使文本更加容易閱讀，而且可以使網(wǎng)

4、頁更加具有吸引力。利用JavaScript可以制作各種各樣的圖像特效。利用JavaScript制作網(wǎng)頁特效16.2.1 16.2.1 當鼠標指針經(jīng)過圖像時圖像震動效果當鼠標指針經(jīng)過圖像時圖像震動效果下面制作當鼠標指針放在圖像上的時候，圖像出現(xiàn)震動的效果，具體操作步驟如下。 利用JavaScript制作網(wǎng)頁特效16.2.2 16.2.2 圖片閃爍效果圖片閃爍效果制作圖片閃爍效果主要是利用style.visibility屬性來表示元素的可見性。制作圖片閃爍效果的具體操作步驟如下。利用JavaScript制作網(wǎng)頁特效利用圖像數(shù)組可以實現(xiàn)自動切換圖像效果，具體操作步驟如下。16.2.3 16.2.3

5、自動切換圖像自動切換圖像利用JavaScript制作網(wǎng)頁特效在JavaScript中還提供了窗口對象的方法和屬性，通過這些方法和屬性可以制作出各種各樣的窗口特效。下面以實例來看看窗口特效的具體應用。利用JavaScript制作網(wǎng)頁特效16.3.1 16.3.1 全屏顯示窗口全屏顯示窗口利用fullscreen=yes可以制作全屏顯示窗口，具體操作步驟如下。利用JavaScript制作網(wǎng)頁特效制作定時關閉窗口的具體操作步驟如下。16.3.2 16.3.2 定時關閉窗口定時關閉窗口利用JavaScript制作網(wǎng)頁特效利用JavaScript還可以制作出各種各樣的鼠標特效，下面就通過三個實例講述禁止

6、鼠標右擊、跟隨鼠標指針的圖像和跟隨鼠標指針的滾動字幕效果的制作。利用JavaScript制作網(wǎng)頁特效16.4.1 16.4.1 禁止鼠標右擊禁止鼠標右擊在一些網(wǎng)頁上，當用戶單擊鼠標右鍵時會彈出警告窗口或者直接沒有任何反應。其作用是讓用戶無法使用鼠標右鍵中的相應功能，從而限制用戶一定的操作權(quán)限。利用JavaScript制作網(wǎng)頁特效16.4.2 16.4.2 跟隨鼠標指針移動的圖像跟隨鼠標指針移動的圖像跟隨鼠標指針移動的圖像是一種特殊的鼠標效果，跟隨鼠標指針移動的圖像具體操作步驟如下。利用JavaScript制作網(wǎng)頁特效跟隨鼠標指針的滾動字幕的具體操作步驟如下。16.4.3 16.4.3 跟隨鼠標

7、指針的滾動字幕跟隨鼠標指針的滾動字幕利用JavaScript制作網(wǎng)頁特效可以制作網(wǎng)站上其他常見的特效。利用JavaScript制作網(wǎng)頁特效設置為首頁和加入收藏夾是網(wǎng)頁中最常見的特效，具體操作步驟如下。16.5.1 16.5.1 設置為首頁和加入收藏夾設置為首頁和加入收藏夾利用JavaScript制作網(wǎng)頁特效16.5.2 16.5.2 瀏覽器狀態(tài)欄顯示信息瀏覽器狀態(tài)欄顯示信息瀏覽器狀態(tài)欄信息是由windows對象中的status屬性來進行控制的，瀏覽器狀態(tài)欄顯示信息的具體操作步驟如下 。利用JavaScript制作網(wǎng)頁特效16.5.3 16.5.3 進入網(wǎng)站的口令設置進入網(wǎng)站的口令設置進入網(wǎng)站的口令設置的具體操作步驟如下。利用JavaScript制作網(wǎng)頁特效16.6經(jīng)典習題1. 1. 填空題填空題（1）在很多的網(wǎng)頁上都顯示當前的時間，利用_、_、_