40 個讓你的網站更加友好的 jQuery 外掛

oschina發表於2013-08-28

  一個外掛的基本功能是執行一個含有元素集合的函式陣列。每個方法和jQuery核心組成一個外掛,如.fadeOut()或.addClass()。一個jQuery外掛是一個基本的可以擴充jQuery 原型物件的方法。當原型物件被擴充後,jQuery所有的物件都可以繼承每一個擴充的方法。

  jQuery有強大的社群支援,社群裡有很多技能嫻熟的開發者夜以繼日的創造出令人驚歎的指令碼和網路應用。然而,這將增大了為你任務篩選外掛的難度。這就是你為什麼會看到此推薦,你將在這裡找40個必須的jQuery外掛集合,當你應用這些外掛時,將會讓你得網站變得更加友好。

  好好享受吧!

 1.FlowType.js

  FlowType.JS是一個可以自動調整字型大小和行高(根據父類的寬)的jQuery外掛,這樣我們的內容將呈現出我們喜歡的樣子。當調整大小時,它可以設定最小/大字型,最小/大寬度。同時它對webfonts有很好的支援,下面是個展示它如何工作的例子(試著改變改變瀏覽器的大小).

  下載

 2.jQuery Flat Shadow

jquery-flat-shadow

  jQuery Flat Shadow是一個能夠新增陰影效果到任何目標上的jQuery外掛。它可以自定義陰影的顏色,角度,同時還可以控制陰影的開啟和關閉狀態。

  下載

 3.任意錨點JS

  Arbitrary.Anchor.js是一個可以擴充標準錨點(通過#連結)功能的jQuery外掛。它可以讓我把目標投向任何jQuery選擇器(如類和元素型別)而不僅僅侷限於id。同時它對複雜的選擇器支援的也不錯。(如http://example.com#.sup.brah-這要匹配兩個類)。點選連結將會產生平滑的自動滾動效果。而且,這個滾動的速度也可以在連結裡設定(如 http://example.com#.sup.brah|100 )

  下載

 4.tidyTime.js

  tidyTime.js是一個友好展示時間的jQuery外掛。時間數值將被轉化為如:“9點過一刻”,“5點整”,“7點57”字串等等。而且,這個外掛允許我們可以在時間的前邊或是後面新增自定義字串,如:“嗨,現在是3點50分,要快哦!”。也可以根據不同的時間戳指定字串,這樣當觸發tidyTime時就會產生一個存在的回撥。

  下載

 5.Sticky-kit

  Sticky-kit是一個很方便的jQuery外掛,它能簡單的建立/管理粘性元素,而且一些組合特性也能用於複雜應用中。這些特性包括“處理多個粘性元素”,“根據元素在檢視中的位置開啟和關閉行為”以及回撥。同時它也有根據瀏覽器大小改變重新計算元素尺寸的函式。

  下載

 6.Owl Carousel

  Owl Carousel是一個可以讓我們快速建立響應式旋轉木馬滑塊的外掛。它支援觸控和能夠展示包含任何標籤的HTML內容。它可以設定換頁/滑動速度、開啟/關閉自動演示,展示豆子導航等。同時,也可以定義桌面顯示專案的數目,Owl Carousel可以自動的區分平板和手機。

  下載

 7.SlimMenu

  SlimMenu 可以將帶有深度的非順序列表轉化為一個帶有子選單的選單,在小螢幕上,選單變成下拉式導航。它支援觸控和自定義選項如動畫和速度。

  下載

 8.Tabulous.js

  Tabulous.js是一個輕量級的jQuery外掛,它能用普通的HTML結構來簡單的建立。選項卡可以用CSS建立,同時存在開關效果(滑動,縮放,翻轉)。它沒有複雜的特性,就只有選項卡,它的特效有時就是我們想要的。

  下載

 9. EasyAB

easyAB

  這是一個快速建立A/B或者多元測試的jQuery(和Zepto)外掛。一旦事件被觸發,他們就會被Google Analytics中的自定義變數記錄下來。easyAB可以新增任何數量的命令,同時它們可以自定義到JavaScript函式中。

  下載

 10. S Gallery

s-galalry

  S Gallery是另外一款jQuery圖片畫廊外掛,它能夠在可以有響應事件的網格中顯示圖片。它的靈感是來自於sony產品首頁的畫廊效果(sony產品首頁是用flash製作的),然後S Gallery完全模仿了它。當某個單元格被點選並且獲取到焦點的時候,你就可以通過向前-向後按鈕或方向鍵來瀏覽其他的圖片。

  下載

 11. Twenty Twenty

twenty-twenty

  TwentyTwenty 是一個視覺擴散工具,非常容易的就能夠辨認出它們。它的原理是兩張圖片互相堆疊在對方的上面。當滑塊移動通過整個影象的時候,它利用css的屬性來調整左側的影象。這允許右邊的影象顯示通過容器。

  下載

 12. SMint

smint

  Smint 是一款簡便的jQuery外掛,她可以幫助你實現一頁風格網站的導航。她由兩個元素組成,一個是粘性的導航條,他可以在你滾動你的頁面時停留在整個頁面的頂部;另一個是選單按鈕,它可以自動地讓頁面滾動到你鎖點選的區域。SMINT是一個簡單的外掛,她又一個選項可以控制頁面的滾動速度。她的預設速度是半秒鐘,當然你也可以把她設定到任意你想要的時間。下載的元件中還包含有例子,她們都可以免費的作為您單頁網站的惹眼的模板。

  下載

 13.Loda Button:載入時的動態按鈕

loda-buttons

  Loda Button 是一款簡易的jq外掛動態按鈕圖示,在等待從伺服器獲取資料時使用。loda-btn和loda-icon的樣式被用在了這款外掛的按鈕元件中。他的樣式十分簡單,並且放置在loda-button.css檔案中。此元件的動態效果是使用支援Chrome,Firefox,Opera和IE10的css3的animation,transitions和transforms實現的。

  資源

 14. Pop Easy

pop-easy

  PopEasy是一個輕量jQuery外掛,它是任何一個像輕易建立模態視窗的開發者所必備的。通過在你的頁面上應用一個遮罩效果並彈出一個定製的模態視窗,來讓你的焦點放在重要的資訊上。

  要在頁面上使用多個模態視窗,你必須在你希望開啟的div層中同步id觸發器的href屬性。這種工作原理和從一個彈出的模態過渡到另一個模態的原理是一樣的。只需要在你希望離開的模態視窗中放置一個href連線,它和另一個模態的id相匹配。
 
  原始碼

 15. Reveal

reveal

  Reveal很了不起,實現起來也簡單,是一個跨瀏覽器併相容現代瀏覽器(還帶有優雅降級功能)。同時它很輕量,只有1.75KB。設定Reval模態只需要三步。附加所需檔案,放入模態的標記處然後給你的按鈕新增屬性。Reval遵守MIT許可。

  原始碼

 16. Hide/Show Password Plugin

hide-show-password-plugin

  Hide/show Password外掛讓你輕易隱藏和顯示密碼輸入欄中的內容。這個外掛最酷的部分就是”innerToggle“選項。當設定為開的時候,它可以很容易建立漂亮隱藏/顯示 控制元件,你可以定製自己喜歡的樣式。在觸屏瀏覽器中,你滑動的時候它甚至能保持輸入焦點。

  原始碼

 17. Readmore.js

read-more

  Readmore.js是一個平滑的,輕量的jQuery外掛,用於摺疊和展開大段的文字。並帶有“閱讀更多”和“關閉”連結。 Readmore.js所需的標記語言極其輕量而簡單。不需要div層的複雜設定或者硬編碼的類名,只需要在包含大段文字的元素裡呼叫.readmore(),Readmore.js就會幫你處理剩餘的工作。

  原始碼

 18.向上滾動

  ScrollUp是一個輕量級jQuery外掛,它可以簡單的建立適用於任何網站的使用者自定義“向上滾動”特性。給activeOverlay設定一個可用的CSS顏色,這樣你可以建立一個可見的線條幫助你決定一個適合的高度(出現向上滑動的標識,譯註)。

  原始碼

 19.FlipClock.js

  FlipClock.js是一個可呈現任何和時間相關的可重複性特效的jQuery外掛。FlipClock.js可支援作為一個時鐘,倒計器和計時器,同時使用者也自定義完整的CSS來改變它的外觀。它有可以自動開始的選項,還有很多回撥方法來控制(start,stop,getTime,setTime...)。同時,它也有可以增加功能的全功能API。

  原始碼

 20. Mobiscroll

mobile-scroll

  Mobiscroll是用於觸控裝置(安卓手機,iPhone,Galaxy平板)的旋轉滾輪/日期和時間選擇器的jQuery外掛。這個控制元件能輕易地定製來支援任何常規值並能用於常規選擇控制元件(下拉選單)作為直觀的選擇項。這種控制元件可以更換主題,你可以在CSS裡更改外觀。它還帶有預定義,漂亮的配色方案,並通過了IOS4,Android 2.2,Android 2.3,Chrome,Safari,Firefox和IE9的測試。

  原始碼

 21. Minimit Gallery

minimit-gallery

  Minimit Gallery 是一個高度可定製的,可無限擴充套件的外掛,用來顯示相簿、幻燈片、旋轉木馬、滑動等效果, 實際上所有包含複雜效果的東西不超過10kb 。使用 Minimit Gallery 你可以將更多的時間放在構思和介面的動態效果上,所有的邏輯功能將通過此外掛來進行管理。它是為JavaScript/Jquery 高階程式設計師設計的,因為你需要編寫所有的動畫和相簿樣式表。它已經在IE7+, Firefox, Safari 和 Chrome上測試通過。

  原始碼 & 示例

 22. Cycle 2

Cycle2

  Cycle是一個相當古老卻很流行的jQuery幻燈片外掛。它現在有一個新的,改進的版本:Cycle2.這個外掛非常適用於任何想要建立完全自定義的幻燈片的人群,使用這個外掛不需要宣告任何標記語言或者樣式。功能上,它也很靈活。Cycle2支援響應佈局,對全部或單個的幻燈片有設定選項,並能通過全特性API輕易地得到擴充。

  源和演示

 23. Circular Content Carousel

cicruclar-carousel

  這款外掛用在在可以附著概要描述內容的滑動條上,當使用者點選內容時(圖片中的more按鈕),一個小的盒子會滑動到當前盒子的旁邊,在那裡使用者可以閱讀和看到與主題相關的詳細資訊,並且滑動條還可以起到導航的作用。

  資源和範例

 24. Tooltipster

Tooltipster

  Tooltipster 是一個 jQuery 外掛,用來快速建立 HTML5驗證 和靈活的工具提示。這個外掛體積小小 (4.8kb 縮小後),執行速度快,並且能夠靈活定製。它的外觀可以通過CSS(主題支援)和箭頭的位置來改變。跟隨滑鼠,外觀的延遲/週期,都可以進行定義。

  原始碼

 25. Colortip

colortip

  它在你的頁面中把元素的title屬性轉化為一系列的多彩的工具提示(tooltips)。有6中顏色可用,所以你可以輕易地在你的設計中配色。在colortip-1.0-jquery.js中,你還可以通過把附加的樣式類包含到樣式表,給顏色陣列新增元素來建立自己的工具提示。

  原始碼

 26. MasonJS

masonjs

  MasonJS,這個jQuery外掛用來解決當前大多數的網格系統相關的問題。當使用Masonry,Isotope或者任何其他的網格外掛,你的網格將會包含凹凸的邊緣和溝縫。Mason就是用來填充這些溝縫的。

  MasonJS關注你的網格並查詢所有構成網格的元素。它建立了一個基於這些元素尺寸的完美網格陣列,並迴圈查詢網格中的每一個元素塊來決定縫隙的位置。然後他就用填充元素填充縫隙,這是你可以定義或者在你的網格中複製元素。

  原始碼

 27. Unslider

unslider

  Unslider是一個只能滑動的jQuery滑塊外掛。沒有奇特的滑動效果沒不需要標記,並且它體積小於3kb。 它非常流暢,靈活,體積非常小。 Unslider已經在所有最新的瀏覽器中測試過,並能在落後的瀏覽器中優雅降級。你可以在需要的時候新增鍵盤指標支援。不是所有的滑動都一樣,Unslider也知道這一點。在沒有額外的程式碼下,它能在高度上時尚地過渡。這些天你很難找到不能響應的網站。Unslider回來了,它是完全響應的。

  原始碼

 28. Camera : 支援觸控的jQuery幻燈片外掛

camera

  Diapo的開發者已經建立了一個新鮮的外掛,叫做Camera,它帶有很多特性並在響應式佈局中工作良好。可以通過HTML元素(影象,文字,視訊等)來建立幻燈片,Camera會在一個外觀優美的介面中顯示出來並帶有一系列的過渡效果。

  原始碼

 29. Royal Slider

royalslider

  Royal Slider是一個jQuery外掛,它可以在滑動片中顯示任何HTML內容(影象,視訊,文字等),並帶有不凡的特性。幻燈片有50項可供定製,4套帶有PSD原始檔的皮膚,9個預元件的模板(不斷更新)和所有的CSS樣式。在CSS3的動畫效果下(JS降級),該外掛工作在主流的瀏覽器中,並能在移動裝置中響應式輸出,執行高速。同時,因為有了延遲載入功能(只載入部分專案),在有很多幻燈片的情況下,它也能快速完成載入。

  原始碼

 30. Progression.js

progressive-form

  Progression.js外掛在使用者完成表格時提供實時提示和經度更新。你所需要做的就是給你的表格一個唯一的ID。然後把資料進度的資料屬性新增到每一個元素,這些元素是表格中的一個處理步驟。一旦你建立了表格,你就要初始化這個外掛。

  原始碼

 31. jQuery 顏色板

color-swatches

  jQuery.swatches 是免費的,用來將單行的div轉變為漂亮的彩色調色盤。你可以按照希望的方式對其自定義。每一次對不同的選擇符呼叫swatchify()的時候,使用不同的類將會渲染出不同的色板組。

  下載

 32. jPages : JavaScript 驅動的分頁外掛

jpages

  jPages是一個客戶端的分頁尾本 (一個 jQuery 外掛) ,它具有鍵盤+滾動瀏覽,自動翻頁,延遲顯示以及自定義瀏覽皮膚的特性。同一個頁面可以插入任何數字的分頁元素,並且非常容易放置定位。

  下載

 33. FitText

FitText

  FitText是一個簡單單功能性強的jQuery外掛,它用來建立適應已定義元素的文字。它能自動更新字型尺寸並,並自動適應換行元素,保證不會因為字型因素而造成佈局崩潰,能在移動端或PC端瀏覽器中顯示頁面。

  下載

 34. FitVids.js

FitVids

  FitVids.js是一個輕量的,簡單易用的jQuery外掛用於建立流暢的嵌入視訊。FitVids自動設定固有比率方法來在你的響應式設計中完成建立流暢的視訊。

  下載

 35. Swipebox

swipebox-jquery-lightbox-plugin

  Swipebox是一個jQuery燈箱外掛,並支援觸控事件,在響應式佈局中也工作良好。當使用擦除手勢或者鍵盤事件時,它會顯示單個或者一組圖形性質的元素。外掛主要使用CSS過渡並在支援性不好的瀏覽器中提供jQuery降級。

  下載

 36. Turn.js

turn_js

  Turn.js是一個jQuery外掛,它帶有可愛光滑的翻頁過渡效果。第一頁作為封面,剩餘部分可以通過翻動頁面的任意角度來瀏覽。Turn.js只有15kb,可在移動端和平板瀏覽器中使用,並使用了硬體加速。

  下載

 37. imBookFlip

imbookflip

  imBookFlip外掛能在一個內聯框架或者直接在整個頁面顯示出書本樣式的內容。頁面可以設定為可翻動,使用者可以點選或者通過自動播放來翻頁。悲哀的是,它不支援拖動翻頁效果。同樣,它的API允許直接指向目標頁面。

  下載

 38. Booklet

booklet

  Booklet可能是這個列表裡選項最多的外掛,它能配置每一個變數。JS翻頁效果不是很強大,因為它要保持內容在範圍內(不超過書本本身),但它工作健壯。可以通過鍵盤,前後鍵或者自動播放來翻頁。每一個頁面有一個唯一的URL(使用雜湊標籤)。它支援章節,顯示頁面號,回撥互動。

  下載

 39. Gmaps.js

gmap

  GMaps.js 是一款資源豐富的jQuery外掛,它可以使消耗過高的谷歌地圖輕便化。此外,加入了一個特殊定位的標準地圖,我們可以定義其縮放比例,新增商場,得到使用者所在位置(HTML5 geolocation),定義了路徑,標記出路線並且還有跟多內容僅僅通過一小段程式碼。

  下載

 40. JQVMap

jqvmap

  JQVMap用來渲染向量地圖的jQuery外掛,它在現代瀏覽器中使用SVG,其餘的瀏覽器中使用VML。這是一個基於jVectorMap外掛高度修改的版本,帶有即用的世界地圖。有很多美化地圖的選項,如顏色,邊框或模糊。

  下載 

 

  英文地址:40-jquery-plugins-to-improve-your-website/

相關文章