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

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

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

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

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

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

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

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

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

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