第15章 JavaScript常用特效收集.ppt

1、第15章 JavaScript常用特效收集,JavaScript的網(wǎng)頁特效運用在很多的方面，能夠?qū)崿F(xiàn)很多絢麗多彩的特殊效果。根據(jù)效果的基本性質(zhì)大概可以分為文字特效、鼠標(biāo)特效、圖片特效、頁面特效、時間特效等，本節(jié)就分別舉例進行說明。,15.1 使用文字特效,網(wǎng)頁最開始的時候，主要的內(nèi)容就是文本，因此文本特效在網(wǎng)頁中是數(shù)不勝數(shù)，下面列舉一些常見的文字特效。,15.1.1 隨機文本,本例的效果是瀏覽器訪問網(wǎng)頁時，根據(jù)備選結(jié)果里設(shè)置好的文字，隨機出現(xiàn)文本。本例主要利用了數(shù)學(xué)函數(shù)產(chǎn)生隨機的序號，以序號作為保存隨機文本數(shù)組的下標(biāo)，最后通過讀取數(shù)組元素內(nèi)容得到隨機文本。,15.1.2 文本鏈接顏色變換,本例

2、控制具有鏈接的文本，根據(jù)一定的規(guī)律實現(xiàn)顏色的轉(zhuǎn)換，通過一個數(shù)組來設(shè)置變換的可選顏色，主函數(shù)linkDance用來獲得頁面的鏈接文本，并且通過setTimeout延遲函數(shù)來控制鏈接顏色間隔轉(zhuǎn)換，并且使用遞歸讓效果持續(xù)循環(huán)。,15.1.3 上下跳動的文本,本例的效果是文本在頁面區(qū)域上下跳動，變換位置，通過anim函數(shù)來進行位置的變換（主要的原理就是改變文本所在對象的top屬性）同時實現(xiàn)自身的遞歸循環(huán)，通過start函數(shù)來實現(xiàn)主函數(shù)的啟動。,15.1.4 定期滾動文本,本例的效果是指定的內(nèi)容滾動顯示，可以設(shè)定顯示區(qū)域、顏色等。 本例的效果使用非常廣泛，很多大型的網(wǎng)站都運用了這個效果，尤其在廣告的發(fā)布

3、上面。本例的效果是在某個指定的區(qū)域，定期會滾動顯示內(nèi)容，每隔一段時間間隔輪換，如此循環(huán)，效果如圖所示。,15.1.5 鏈接提示文字,網(wǎng)頁里有很多超鏈接，有的鏈接因為區(qū)域的關(guān)系，不能顯示很多的文字，這時就可以使用給鏈接增加提示的方式來進行額外的說明，當(dāng)鼠標(biāo)移上的時候，就能夠顯示說明的內(nèi)容。,15.2 使用鼠標(biāo)特效,鼠標(biāo)控制了網(wǎng)頁上的大部分動作，很多的工作都是由鼠標(biāo)來完成的，比如單擊、雙擊、勾選等。鼠標(biāo)的特效也很多，舉例如下。,15.2.1 禁止鼠標(biāo)右鍵,禁止鼠標(biāo)右鍵的功能，也是很多網(wǎng)站為了保護網(wǎng)頁內(nèi)容而做的一個小技巧，比如不允許網(wǎng)友下載圖片、利用右鍵菜單進行復(fù)制操作等。屏蔽鼠標(biāo)右鍵功能不能完全的

4、防止這些，有經(jīng)驗的用戶通過一些步驟同樣能夠達到目的，本例只是為了說明使用JavaScript對鼠標(biāo)按鍵的控制。,15.2.2 多種鼠標(biāo)效果,本例主要使用了CSS的樣式來規(guī)定鼠標(biāo)的風(fēng)格，通過style屬性來進行設(shè)置。 鼠標(biāo)的形狀，能夠告訴用戶當(dāng)前鼠標(biāo)指向的區(qū)域的狀態(tài)，比如鏈接、可單擊等，或者計算機目前的狀態(tài)，如忙碌、等待等。本例顯示了很多的鼠標(biāo)形狀，可以在合適的時候進行選擇。效果圖如所示。,15.2.3 十字準(zhǔn)星,十字準(zhǔn)星是鼠標(biāo)的又一個效果，鼠標(biāo)在頁面上有個坐標(biāo)點，以這個點為交點的豎直和水平的兩條直線，始終跟隨著鼠標(biāo)，像一個準(zhǔn)星一樣。 這個效果是一個特別酷的效果，有點類似于狙擊槍的準(zhǔn)星。效果如圖

5、所示。,15.2.4 鼠標(biāo)跟蹤動畫,鼠標(biāo)特效里還有一個比較有趣的效果，就是一些小圖標(biāo)跟隨著鼠標(biāo)的運動軌跡而運動，這個特效能夠設(shè)置跟隨鼠標(biāo)的圖片，同時還能變化為跟隨鼠標(biāo)的文字。 本例主要是通過JavaScript獲得了鼠標(biāo)的位置，并且使得圖片的位置隨著鼠標(biāo)的位置更改，這樣可以實現(xiàn)鼠標(biāo)跟蹤的效果，指定的圖片可以跟蹤鼠標(biāo)的滑動軌跡而跟著滑動，非?？?。效果如圖所示。,15.2.5 伴隨鼠標(biāo)的圖片,與上例比較類似的效果是一個固定的圖片，始終伴隨著鼠標(biāo)，這個例子顯得比較簡單，就是使得圖片和鼠標(biāo)始終保持一個相對的位置即可。 本例中，指定的圖片會跟著鼠標(biāo)的移動保持著與鼠標(biāo)的相對位置。效果如圖所示。,15.3

6、使用圖片特效,圖片的出現(xiàn)，使得網(wǎng)頁變得更加的豐富，圖片的特效也不少，圖片本身具有的豐富信息加上一些效果，會使得網(wǎng)頁更加有吸引力。,15.3.1 圖片若隱若現(xiàn),通過改變圖片的透明度，可以使得圖片的可見程序能夠被JavaScript調(diào)節(jié)，結(jié)合合適的時間間隔，就可以使得圖片產(chǎn)生若隱若現(xiàn)的特殊效果。 在本例中，顯示的圖片主要通過改變其透明度實現(xiàn)若隱若現(xiàn)。效果如圖所示。,15.3.2 四處飄浮的小球,本例的效果是一個小球在頁面內(nèi)四處飄浮，在大部分的網(wǎng)站中，把小球換成了相關(guān)的廣告圖片，來實現(xiàn)廣告的飄浮效果。 這個例子在很多的廣告效果里使用到，通過改變飄動的速度實現(xiàn)廣告圖片的四處游走。效果如圖所示。,15.

7、3.3 變換圖片,在電子商務(wù)網(wǎng)站里，對于產(chǎn)品展示的頁面，通常需要根據(jù)選擇的產(chǎn)品名稱顯示對應(yīng)的產(chǎn)品圖片，本例對此做了簡單的示例。,15.3.4 圖片秋千,改變圖片位置的方法，還有使得圖片在水平方向上做循環(huán)的運動，類似蕩秋千一樣，原理同樣是在一定的時間周期上，有規(guī)律的改變圖片的位置。 一個有趣的效果，可以設(shè)置晃動的幅度及速度，效果如圖所示。,15.4 使用頁面特效,頁面是整個網(wǎng)頁的主體，頁面有背景顏色、背景圖片等樣式，同樣也具有一些特效。,15.4.1 調(diào)色板,本例原理很簡單，就是通過JavaScript改變頁面的背景顏色，本例列出了常見的顏色表，用于進行顏色的選擇。 通過選擇不同的顏色選項，改變

8、了頁面的背景色。效果如圖所示。,15.4.2 背景滾動,通過JavaScript改變背景圖片與頁面的相對位置，還能實現(xiàn)背景圖片滾動的效果，配合合適的背景圖片，可以實現(xiàn)特殊的效果。 瀏覽后可以看見，背景在不停的滾動，本例是一個星空的圖片，這樣的效果顯得很不錯。效果如圖所示。,15.4.3 水印背景,很多的頁面，設(shè)置了背景圖片后，隨著頁面內(nèi)容的改變，背景圖片的大小變得不適合頁面的尺寸，這樣會顯得不太協(xié)調(diào)，為了解決這個問題，可以JavaScript改變背景圖片的對齊及重復(fù)樣式，來實現(xiàn)圖片的水印效果，也就是不論頁面的內(nèi)容如何變化，圖片的位置始終保持固定。,15.5 使用時間特效,時間和日期的使用在網(wǎng)頁

9、里也很常見，通過時間和日期的使用，在網(wǎng)頁上標(biāo)注當(dāng)前的日期或者時間，也可以顯示各種時鐘樣式。,15.5.1 日期和星期,在網(wǎng)頁上顯示當(dāng)前的時間和星期是很常見的一種效果，本例主要通過JavaScript獲取本地計算機的時間，最后顯示在頁面上即可。,15.5.2 萬年歷,有了一個電子萬年歷，就可以面去了翻看日歷了，本例同樣是使用JavaScript內(nèi)置的時間對象，獲取相關(guān)的值，通過巧妙的頁面設(shè)計，顯示出了一個萬年日歷。 一個萬年歷，在這個程序基礎(chǔ)上，可以擴展出很多的日歷控件。效果如圖所示。,15.5.3 倒計時,頁面上通常會對某個固定的時間倒計時提示，同樣是利用了JavaScript的時間對象，獲取當(dāng)前時間，與設(shè)定的到期時間進行比較，即可實現(xiàn)倒計時效果。 以上是以天為單位的倒計時，還可以擴展到小時、分、秒等。效果如圖所示。,15.5.4 JavaScript時鐘,通過JavaScript還能夠創(chuàng)建出時鐘效果，本例顯得較為復(fù)雜，主要原理是需要構(gòu)建時鐘的布局，以及根據(jù)當(dāng)前時間，動態(tài)的改變創(chuàng)建時鐘的指針位置。 這是一個完全用JavaScript實現(xiàn)的時鐘，沒有使用任何的圖片，結(jié)合了數(shù)