10種JavaScript特效執行個體讓你的網站更吸引人

10種JavaScript特效執行個體讓你的網站更吸引人

今天的話題是如何改進自己網站的介面或提高網站的視覺體驗，從而讓使用者記憶猶新。

我們有三種主要的方法（從難到易）：自己動手寫指令碼;使用類似於jQuery和mooTools的JavaScript架構（可以讓編寫代碼變得更容易些）;使用能工作於現有的JavaScript架構下的提前預置好的指令碼或那種從頭開始開發的建立者。這篇文章適合那些打算提高工作效率或不願意從頭開發指令碼的人閱讀。

這裡收集了10種強大的且容易上手的JavaScript特效來改進您的網頁站介面，從而得到更多的使用者體驗。這10種javaScript特效回味你的網站帶來意想不到的視覺盛宴，而且安裝和使用都比較容易。

您還可以參考以下JavaScript/Ajax相關教程及資源：

《12種Javascript解決常見瀏覽器安全色問題的方法》

《300+Jquery， CSS， MooTools 和 JS的導覽功能表資源》

1.GreyBox

GreyBox 允許你以強制回應視窗的形式運行其它網站（類似於彈出式視窗，但又不運行新的瀏覽器視窗）。如果你的網站上有一些其他網站的匯出連結，但你又不想讓你的使用者離開你的網站或不想讓他們開啟另一個瀏覽器視窗的話，這真的是一個很好的解決方案。使用GreyBox 非常簡單。

這裡是關於GreyBox的關鍵頁面：下載頁面， 說明頁面， 執行個體， 安裝，和 進階用法（如果你是JavaScript高手，看完這個頁面中的一些技巧說明，你就能擴充它的函數庫了）

2.instant.js

instant.js 特效會為你的照片動態添加類似偏振（Polaroid-like）的效果（將照片傾斜並添加陰影和邊框）。現在我們可以使用這個照片特效類比Photoshop的數位照片處理了。

這個指令碼技術可以用於在你的網站上有很多照片，但又不想一個個手動處理的情況。（也許你會使用批量處理，但那隻是建立於單一的動作下的，如調整尺寸、裁剪等…）

3.mooTable

mooTable允許你為表格中的資料進行排序（不用重新整理頁面），利用DOM替代資料庫的請求的新式排序方法。使用簡單，僅需輕微的配置即可。

這個指令碼庫需要mooTools架構的支援，你可以在這裡下載。你還可以在論壇中的mootools板塊尋找一些建立mooTable的方法，會有很多mootools開發人員的反饋。

4.FancyForm

FancyForm 可以取代單調乏味的表單控制項如選項按鈕和複選框。基本的使用僅需兩步：（1）在頁面中調用 JavaScript檔案 （2）為你的表單控制項指定類名，如複選框指定class=”checked” 或 class=”unchecked”，單選框指定class=”selected” 和 class=”unselected”。非常不顯眼的javaScript.

該指令碼需要mootools的支援（版本1.1）

5.image menu

image menu，使用phatfusion開發而成。非常漂亮的橫向菜單，當你懸停在某個功能表項目上時，圖片就會擴充開。

你可以使用這個技術為照片的隱藏部分使用蒙太奇效果，但當使用者將滑鼠移至上方在上面是就會顯示全部。

該指令碼需要mootools的支援（版本1.1）

6.AmberJack： Site Tour Creator

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

您可以利用這個技術來示範如何讓使用者使用這個網站，使用者只需要點擊下一步的按鈕，就能瞭解需要做的每一步。

7.ImageFlow

靈感來源於iPod的“coverflow”，ImageFlow是一個用來展示圖片集合的特效。使用者可以拖動下方的捲軸來控製圖片的顯示。

使用者點擊圖片以後，會轉向到現實清晰大圖的網頁。

8.ShadowBox.js Media viewer

ShadowBox是”完全使用JavaScipt編寫的跨瀏覽器、跨平台、代碼簡潔且文檔完整的媒體查看應用程式”（怎麼樣？一口氣說下來這麼多優點。）

ShadowBox區別於其它Model Box（如Lightbox 2）的地方是，它還支援除圖片以外的很多其它檔案類型，如flash視頻、內嵌式youtube視頻、Apple.com預告片和網頁（這樣能讓使用者不用轉到另一個頁面就能完成登入、註冊）。這是很有價值的指令碼。

9.TJPzoom 3 – image magnifier

TJPzoom可以讓你將某個高清圖片的局部放大顯示。按下並拖動滑鼠的話，可以改變放大地區的尺寸。

10.mootools Tips

mootools Tips是mooTools架構的一部分，它可以讓你為使用者提供一個高度可配置的工具提示，當使用者將滑鼠移至上方在某個連結或圖片上時，一些關於這個元素的附加的提示資訊就會在螢幕上顯示出來。

一些可以調節的方法：CSS 樣式（可以修改預設的黑背景白文字）、漸層速度、工具提示在螢幕上顯示的風格、你希望工具提示顯示多久。這個指令碼需要mootools架構的支援。