JavaScript常用特效收集

《JavaScript常用特效收集》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

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)右鍵功能不能完全的防止這些，有經(jīng)驗(yàn)的用戶通過一些

4、步驟同樣能夠達(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)星。效果如圖所示。15.2.4鼠標(biāo)跟蹤動(dòng)畫鼠標(biāo)特效

5、里還有一個(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)，非?？?。效果如圖所示。15.2.5伴隨鼠標(biāo)的圖片與上例比較類似的效果是一個(gè)固定的圖片，始終伴隨著鼠標(biāo)，這個(gè)例子顯得比較簡(jiǎn)單，就是使得圖片和鼠標(biāo)始終保持一個(gè)相對(duì)的位置即可。本例中，指定的圖片會(huì)跟著鼠標(biāo)的移動(dòng)保持著與鼠標(biāo)的相對(duì)位置。效果如圖所示。15.3使用圖片特效圖片的出現(xiàn)，使得網(wǎng)頁變得更加的豐富，圖

6、片的特效也不少，圖片本身具有的豐富信息加上一些效果，會(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.3.3變換圖片在電子商務(wù)網(wǎng)站里，對(duì)于產(chǎn)品展示的頁面，通常需要根

7、據(jù)選擇的產(chǎn)品名稱顯示對(duì)應(yīng)的產(chǎn)品圖片，本例對(duì)此做了簡(jiǎn)單的示例。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)色板本例原理很簡(jiǎn)單，就是通過JavaScript改變頁面的背景顏色，本例列出