天天看點

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

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

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

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

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

《10個非常棒的 Ajax及Javascript執行個體資源網站 》

《12種 Javascript解決常見浏覽器相容問題的方法 》

《300+Jquery, CSS, MooTools 和 JS的導航菜單資源 》 

1.GreyBox

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

  GreyBox 允許你以模 式視窗 的形式運作其它網站(類似于彈出式視窗,但又不運作新的浏覽器視窗).如果你的網站上有一些其他網站的導對外連結接,但你又不想讓你的使用者離開 你的網站或不想讓他們打開另一個浏覽器視窗的話,這真的是一個很好的解決方案。使用GreyBox 非常簡單。

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

2.instant.js

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

  instant.js  特效會為你的照片動态添加類似偏振(Polaroid-like)的效果(将照片傾斜并添加陰影和邊 框)。現在我們可以使用這個照片特效模拟Photoshop的數位照片處理了。

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

3.mooTable

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

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

  這個腳本庫需要mooTools架構的支援,你可以在這裡下載下傳 。你還可以在論壇中的mootools闆塊 尋 找一些建立mooTable的方法,會有很多mootools開發者的回報。

4.FancyForm

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

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

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

5.image menu

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

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

  你可以使用這個技術為照片的隐藏部分使用蒙太奇效果,但當使用者将滑鼠懸停在上面是就會顯示全部。

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

6.AmberJack: Site Tour Creator

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

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

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

7.ImageFlow

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

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

  使用者點選圖檔以後,會轉向到現實清晰大圖的網頁。

8.ShadowBox.js Media viewer

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

  ShadowBox是”完全使用JavaScipt編寫的跨浏覽器、跨平台、代碼簡潔且文檔完整的媒體檢視應用程式”(怎麼樣?一口氣說下來這 麼多優點。)

  ShadowBox差別于其它Model Box(如Lightbox 2 ) 的地方是,它還支援除圖檔以外的很多其它檔案類型,如flash視訊、内嵌式youtube視訊、Apple.com預告片和網頁(這樣能讓使用者不用轉到 另一個頁面就能完成登入、注冊)。這是很有價值的腳本。

9.TJPzoom 3 – image magnifier

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

TJPzoom 可以讓你将某個高清圖檔的局部放大顯示。按下并拖動滑鼠的話,可以改變放大區域的尺寸。

10.mootools Tips

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

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

  一些可以調節的方法:CSS 樣式(可以修改預設的黑背景白文字)、漸變速度、工具提示在螢幕上顯示的風格、你希望工具提示顯示多久。這個腳本需要mootools 框 架的支援。

繼續閱讀