資源描述：
《JavaScript常用特效收集課件.ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
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)右鍵功能不能完全的防止這些，有經(jīng)驗的用戶通過一些步驟同樣能夠
4、達到目的，本例只是為了說明使用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)星。效果如圖所示。15.2.4鼠標(biāo)跟蹤動畫鼠標(biāo)特效里還有一個比較有
5、趣的效果，就是一些小圖標(biāo)跟隨著鼠標(biāo)的運動軌跡而運動，這個特效能夠設(shè)置跟隨鼠標(biāo)的圖片，同時還能變化為跟隨鼠標(biāo)的文字。本例主要是通過JavaScript獲得了鼠標(biāo)的位置，并且使得圖片的位置隨著鼠標(biāo)的位置更改，這樣可以實現(xiàn)鼠標(biāo)跟蹤的效果，指定的圖片可以跟蹤鼠標(biāo)的滑動軌跡而跟著滑動，非?？帷ＰЧ鐖D所示。15.2.5伴隨鼠標(biāo)的圖片與上例比較類似的效果是一個固定的圖片，始終伴隨著鼠標(biāo)，這個例子顯得比較簡單，就是使得圖片和鼠標(biāo)始終保持一個相對的位置即可。本例中，指定的圖片會跟著鼠標(biāo)的移動保持著與鼠標(biāo)的相對位置。效果如圖所示。15.3使用圖片特效圖片的出現(xiàn)，使得網(wǎng)頁變得更加的豐富，圖片的特效也不少，圖片
6、本身具有的豐富信息加上一些效果，會使得網(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.3.3變換圖片在電子商務(wù)網(wǎng)站里，對于產(chǎn)品展示的頁面，通常需要根據(jù)選擇的產(chǎn)品名稱顯示對應(yīng)
7、的產(chǎn)品圖片，本例對此做了簡單的示例。15.3.4圖片秋千改變圖片位置的方法，還有使得圖片在水平方向上做循環(huán)的運動，類似蕩秋千一樣，原理同樣是在一定的時間周期上，有規(guī)律的改變圖片的位置。一個有趣的效果，可以設(shè)置晃動的幅度及速度，效果如圖所示。15.4使用頁面特效頁面是整個網(wǎng)頁的主體，頁面有背景顏色、背景圖片等樣式，同樣也具有一些特效。15.4.1調(diào)色板本例原理很簡單，就是通過JavaScript改變頁面的背景顏色，本例列出
