我們有三種主要的方法(從難到易):自己動手寫腳本;使用類似于jQuery和mooTools的JavaScript框架(可以讓編寫代碼變得更容易些);使用能工作于現(xiàn)有的JavaScript框架下的提前預(yù)置好的腳本或那種從頭開始開發(fā)的創(chuàng)建者。這篇文章適合那些打算提高工作效率或不愿意從頭開發(fā)腳本的人閱讀。

您還可以參考以下JavaScript/Ajax相關(guān)教程及資源:
《10個非常棒的Ajax及Javascript實例資源網(wǎng)站》
《12種Javascript解決常見瀏覽器兼容問題的方法》
《300+Jquery, CSS, MooTools 和 JS的導(dǎo)航菜單資源》?

1.GreyBox

　　GreyBox允許你以模式窗口的形式運行其它網(wǎng)站(類似于彈出式窗口，但又不運行新的瀏覽器窗口).如果你的網(wǎng)站上有一些其他網(wǎng)站的導(dǎo)出鏈接，但你又不想讓你的用戶離開你的網(wǎng)站或不想讓他們打開另一個瀏覽器窗口的話，這真的是一個很好的解決方案。使用GreyBox 非常簡單。

?

　　這里是關(guān)于GreyBox的關(guān)鍵頁面:下載頁面,?說明頁面,?實例,?安裝,和?高級用法(如果你是JavaScript高手，看完這個頁面中的一些技巧說明，你就能擴展它的函數(shù)庫了)

2.instant.js

　　instant.js?特效會為你的照片動態(tài)添加類似偏振(Polaroid-like)的效果(將照片傾斜并添加陰影和邊框)?，F(xiàn)在我們可以使用這個照片特效模擬Photoshop的數(shù)碼照片處理了。

　　這個腳本技術(shù)可以用于在你的網(wǎng)站上有很多照片，但又不想一個個手動處理的情況。（也許你會使用批量處理，但那只是建立于單一的動作下的，如調(diào)整尺寸、裁剪等…）

3.mooTable

　　mooTable允許你為表格中的數(shù)據(jù)進行排序(不用刷新頁面)，利用DOM替代數(shù)據(jù)庫的請求的新式排序方法。使用簡單，僅需輕微的配置即可。

　　這個腳本庫需要mooTools框架的支持，你可以在這里下載。你還可以在論壇中的mootools板塊尋找一些創(chuàng)建mooTable的方法，會有很多mootools開發(fā)者的反饋。

4.FancyForm

　　FancyForm可以取代單調(diào)乏味的表單控件如單選按鈕和復(fù)選框?；镜氖褂脙H需兩步:(1)在頁面中調(diào)用JavaScript文件 (2)為你的表單控件指定類名，如復(fù)選框指定class=”checked” 或 class=”unchecked”，單選框指定class=”selected” 和 class=”unselected”。非常不顯眼的javaScript.

　　該腳本需要mootools的支持(版本1.1)

5.image menu

　　image menu,使用phatfusion開發(fā)而成。非常漂亮的橫向菜單，當(dāng)你懸停在某個菜單項上時，圖片就會擴展開。

　　你可以使用這個技術(shù)為照片的隱藏部分使用蒙太奇效果，但當(dāng)用戶將鼠標(biāo)懸停在上面是就會顯示全部。

　　該腳本需要mootools的支持(版本1.1)

6.AmberJack: Site Tour Creator

　　這是一個輕量級的JavaScipt庫，允許你為網(wǎng)站添加實施快速游覽。允許用戶事實的在瀏覽每個頁面的時候查看簡短的描述。

　　您可以利用這個技術(shù)來演示如何讓用戶使用這個網(wǎng)站，用戶只需要點擊下一步的按鈕，就能了解需要做的每一步。

7.ImageFlow

　　靈感來源于iPod的“coverflow”，ImageFlow是一個用來展示圖片集合的特效。用戶可以拖動下方的滾動條來控制圖片的顯示。

　　用戶點擊圖片以后，會轉(zhuǎn)向到現(xiàn)實清晰大圖的網(wǎng)頁。

8.ShadowBox.js Media viewer

　　ShadowBox是”完全使用JavaScipt編寫的跨瀏覽器、跨平臺、代碼簡潔且文檔完整的媒體查看應(yīng)用程序”(怎么樣?一口氣說下來這么多優(yōu)點。)

　　ShadowBox區(qū)別于其它Model Box（如Lightbox 2）的地方是，它還支持除圖片以外的很多其它文件類型，如flash視頻、內(nèi)嵌式y(tǒng)outube視頻、Apple.com預(yù)告片和網(wǎng)頁(這樣能讓用戶不用轉(zhuǎn)到另一個頁面就能完成登錄、注冊)。這是很有價值的腳本。

9.TJPzoom 3 – image magnifier

TJPzoom可以讓你將某個高清圖片的局部放大顯示。按下并拖動鼠標(biāo)的話，可以改變放大區(qū)域的尺寸。

10.mootools Tips

　　mootools Tips是mooTools框架的一部分，它可以讓你為用戶提供一個高度可配置的工具提示，當(dāng)用戶將鼠標(biāo)懸停在某個鏈接或圖片上時，一些關(guān)于這個元素的附加的提示信息就會在屏幕上顯示出來。

　　一些可以調(diào)節(jié)的方法:CSS?樣式(可以修改默認的黑背景白文字)、漸變速度、工具提示在屏幕上顯示的風(fēng)格、你希望工具提示顯示多久。這個腳本需要mootools框架的支持。

英文原文:10 JavaScript Effects to Boost Your Website’s Fanciness Factor
轉(zhuǎn)載原文:10種JavaScript特效實例讓你的網(wǎng)站更吸引人

轉(zhuǎn)載于:https://www.cnblogs.com/zytrue/p/8494431.html

總結(jié)

以上是生活随笔為你收集整理的10种JavaScript特效实例让你的网站更吸引人的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。