一個(gè)插件的基本功能是執(zhí)行一個(gè)含有元素集合的函數(shù)數(shù)組。每個(gè)方法和jQuery核心組成一個(gè)插件，如.fadeOut() 或.addClass()。一個(gè)jQuery插件是一個(gè)基本的可以擴(kuò)充jQuery 原型對象的方法。當(dāng)原型對象被擴(kuò)充后，jQuery所有的對象都可以繼承每一個(gè)擴(kuò)充的方法。

jQuery有強(qiáng)大的社區(qū)支持，社區(qū)里有很多技能嫻熟的開發(fā)者夜以繼日的創(chuàng)造出令人驚嘆的腳本和網(wǎng)絡(luò)應(yīng)用。然而，這將增大了為你任務(wù)篩選插件的難度。這就是你為什么會看到此推薦，你將在這里找40個(gè)必須的jQuery插件集合，當(dāng)你應(yīng)用這些插件時(shí)，將會讓你得網(wǎng)站變得更加友好。

好好享受吧!

1.FlowType.js

FlowType.JS是一個(gè)可以自動調(diào)整字體大小和行高(根據(jù)父類的寬)的jQuery插件，這樣我們的內(nèi)容將呈現(xiàn)出我們喜歡的樣子。當(dāng)調(diào)整大小時(shí)，它可以設(shè)置最小/大字體，最小/大寬度。同時(shí)它對webfonts有很好的支持，下面是個(gè)展示它如何工作的例子(試著改變改變?yōu)g覽器的大小).

??下載??

2.jQuery Flat Shadow

jQuery Flat Shadow是一個(gè)能夠添加陰影效果到任何目標(biāo)上的jQuery插件。它可以自定義陰影的顏色，角度，同時(shí)還可以控制陰影的開啟和關(guān)閉狀態(tài)。

??下載??

3.任意錨點(diǎn)JS

Arbitrary.Anchor.js是一個(gè)可以擴(kuò)充標(biāo)準(zhǔn)錨點(diǎn)(通過#鏈接)功能的jQuery插件。它可以讓我把目標(biāo)投向任何jQuery選擇器(如類和元素類型)而不僅僅局限于id。同時(shí)它對復(fù)雜的選擇器支持的也不錯(cuò)。(如??http://example.com#.sup.brah??-這要匹配兩個(gè)類)。點(diǎn)擊鏈接將會產(chǎn)生平滑的自動滾動效果。而且，這個(gè)滾動的速度也可以在鏈接里設(shè)置(如 http://example.com#.sup.brah｜100 )

??下載??

4.tidyTime.js

tidyTime.js是一個(gè)友好展示時(shí)間的jQuery插件。時(shí)間數(shù)值將被轉(zhuǎn)化為如：“9點(diǎn)過一刻”，“5點(diǎn)整”，“7點(diǎn)57”字串等等。而且，這個(gè)插件允許我們可以在時(shí)間的前邊或是后面添加自定義字串，如：“嗨，現(xiàn)在是3點(diǎn)50分，要快哦！”。也可以根據(jù)不同的時(shí)間戳指定字串，這樣當(dāng)觸發(fā) tidyTime時(shí)就會產(chǎn)生一個(gè)存在的回調(diào)。

??下載??

5.Sticky-kit

Sticky-kit是一個(gè)很方便的jQuery插件，它能簡單的創(chuàng)建/管理粘性元素，而且一些組合特性也能用于復(fù)雜應(yīng)用中。這些特性包括“處理多個(gè)粘性元素”，“根據(jù)元素在視圖中的位置開啟和關(guān)閉行為”以及回調(diào)。同時(shí)它也有根據(jù)瀏覽器大小改變重新計(jì)算元素尺寸的函數(shù)。

??下載??

6.Owl Carousel

Owl Carousel是一個(gè)可以讓我們快速創(chuàng)建響應(yīng)式旋轉(zhuǎn)木馬滑塊的插件。它支持觸摸和能夠展示包含任何標(biāo)簽的HTML內(nèi)容。它可以設(shè)置換頁/滑動速度、開啟 /關(guān)閉自動演示，展示豆子導(dǎo)航等。同時(shí)，也可以定義桌面顯示項(xiàng)目的數(shù)目，Owl Carousel可以自動的區(qū)分平板和手機(jī)。

??下載??

7.SlimMenu

SlimMenu 可以將帶有深度的非順序列表轉(zhuǎn)化為一個(gè)帶有子菜單的菜單，在小屏幕上，菜單變成下拉式導(dǎo)航。它支持觸摸和自定義選項(xiàng)如動畫和速度。

??下載??

8.Tabulous.js

Tabulous.js是一個(gè)輕量級的jQuery插件，它能用普通的HTML結(jié)構(gòu)來簡單的創(chuàng)建。選項(xiàng)卡可以用CSS創(chuàng)建，同時(shí)存在開關(guān)效果(滑動，縮放，翻轉(zhuǎn))。它沒有復(fù)雜的特性，就只有選項(xiàng)卡，它的特效有時(shí)就是我們想要的。

??下載??

9. EasyAB

這是一個(gè)快速創(chuàng)建A/B或者多元測試的jQuery（和Zepto）插件。一旦事件被觸發(fā)，他們就會被Google Analytics中的自定義變量記錄下來。easyAB可以添加任何數(shù)量的命令，同時(shí)它們可以自定義到JavaScript函數(shù)中。

??下載??

10. S Gallery

S Gallery是另外一款jQuery圖片畫廊插件，它能夠在可以有響應(yīng)事件的網(wǎng)格中顯示圖片。它的靈感是來自于sony產(chǎn)品首頁的畫廊效果（sony產(chǎn)品首頁是用flash制作的），然后S Gallery完全模仿了它。當(dāng)某個(gè)單元格被點(diǎn)擊并且獲取到焦點(diǎn)的時(shí)候，你就可以通過向前-向后按鈕或方向鍵來瀏覽其他的圖片。

??下載??

#p#

11. Twenty Twenty

TwentyTwenty 是一個(gè)視覺擴(kuò)散工具，非常容易的就能夠辨認(rèn)出它們。它的原理是兩張圖片互相堆疊在對方的上面。當(dāng)滑塊移動通過整個(gè)圖像的時(shí)候，它利用css的屬性來調(diào)整左側(cè)的圖像。這允許右邊的圖像顯示通過容器。

??下載??

12. SMint

Smint 是一款簡便的jQuery插件，她可以幫助你實(shí)現(xiàn)一頁風(fēng)格網(wǎng)站的導(dǎo)航。她由兩個(gè)元素組成，一個(gè)是粘性的導(dǎo)航條，他可以在你滾動你的頁面時(shí)停留在整個(gè)頁面的頂部；另一個(gè)是菜單按鈕，它可以自動地讓頁面滾動到你鎖點(diǎn)擊的區(qū)域。SMINT是一個(gè)簡單的插件，她又一個(gè)選項(xiàng)可以控制頁面的滾動速度。她的默認(rèn)速度是半秒鐘，當(dāng)然你也可以把她設(shè)置到任意你想要的時(shí)間。下載的組件中還包含有例子，她們都可以免費(fèi)的作為您單頁網(wǎng)站的惹眼的模板。

??下載??

13.Loda Button:加載時(shí)的動態(tài)按鈕

Loda Button 是一款簡易的jq插件動態(tài)按鈕圖標(biāo)，在等待從服務(wù)器獲取數(shù)據(jù)時(shí)使用。loda-btn和loda-icon的樣式被用在了這款插件的按鈕組件中。他的樣式十分簡單，并且放置在loda-button.css文件中。此組件的動態(tài)效果是使用支持Chrome,Firefox,Opera和IE10的css3 的animation,transitions和transforms實(shí)現(xiàn)的。

??資源??

14. Pop Easy

PopEasy是一個(gè)輕量jQuery插件，它是任何一個(gè)像輕易創(chuàng)建模態(tài)窗口的開發(fā)者所必備的。通過在你的頁面上應(yīng)用一個(gè)遮罩效果并彈出一個(gè)定制的模態(tài)窗口，來讓你的焦點(diǎn)放在重要的信息上。

要在頁面上使用多個(gè)模態(tài)窗口，你必須在你希望打開的div層中同步id觸發(fā)器的href屬性。這種工作原理和從一個(gè)彈出的模態(tài)過渡到另一個(gè)模態(tài)的原理是一樣的。只需要在你希望離開的模態(tài)窗口中放置一個(gè)href連接，它和另一個(gè)模態(tài)的id相匹配。
 
???源碼??

15. Reveal

Reveal很了不起，實(shí)現(xiàn)起來也簡單，是一個(gè)跨瀏覽器并兼容現(xiàn)代瀏覽器(還帶有優(yōu)雅降級功能)。同時(shí)它很輕量，只有1.75KB。設(shè)置Reval模態(tài)只需要三步。附加所需文件，放入模態(tài)的標(biāo)記處然后給你的按鈕添加屬性。Reval遵守MIT許可。

??源碼??

16. Hide/Show Password Plugin

Hide/show Password插件讓你輕易隱藏和顯示密碼輸入欄中的內(nèi)容。這個(gè)插件最酷的部分就是”innerToggle“選項(xiàng)。當(dāng)設(shè)置為開的時(shí)候，它可以很容易創(chuàng)建漂亮隱藏/顯示 控件，你可以定制自己喜歡的樣式。在觸屏瀏覽器中，你滑動的時(shí)候它甚至能保持輸入焦點(diǎn)。

??源碼??

17. Readmore.js

Readmore.js是一個(gè)平滑的，輕量的jQuery插件，用于折疊和展開大段的文本。并帶有“閱讀更多”和“關(guān)閉”鏈接。 Readmore.js所需的標(biāo)記語言極其輕量而簡單。不需要div層的復(fù)雜設(shè)置或者硬編碼的類名，只需要在包含大段文本的元素里調(diào)用.readmore()，Readmore.js就會幫你處理剩余的工作。

??源碼??

18.向上滾動

ScrollUp是一個(gè)輕量級jQuery插件，它可以簡單的創(chuàng)建適用于任何網(wǎng)站的用戶自定義“向上滾動”特性。給activeOverlay設(shè)置一個(gè)可用的CSS顏色，這樣你可以創(chuàng)建一個(gè)可見的線條幫助你決定一個(gè)適合的高度(出現(xiàn)向上滑動的標(biāo)識,譯注)。

??源碼??

19.FlipClock.js

FlipClock.js是一個(gè)可呈現(xiàn)任何和時(shí)間相關(guān)的可重復(fù)性特效的jQuery插件。FlipClock.js可支持作為一個(gè)時(shí)鐘，倒計(jì)器和計(jì)時(shí)器，同時(shí)用戶也自定義完整的CSS來改變它的外觀。它有可以自動開始的選項(xiàng)，還有很多回調(diào)方法來控制 (start,stop,getTime,setTime...)。同時(shí)，它也有可以增加功能的全功能API。

??源碼??

20. Mobiscroll

Mobiscroll是用于觸摸設(shè)備(安卓手機(jī)，iPhone，Galaxy平板)的旋轉(zhuǎn)滾輪/日期和時(shí)間選擇器的jQuery插件。這個(gè)控件能輕易地定制來支持任何常規(guī)值并能用于常規(guī)選擇控件(下拉列表)作為直觀的選擇項(xiàng)。這種控件可以更換主題，你可以在CSS里更改外觀。它還帶有預(yù)定義，漂亮的配色方案，并通過了IOS4，Android 2.2，Android 2.3,Chrome,Safari,Firefox和IE9的測試。

??源碼??

#p#

21. Minimit Gallery

Minimit Gallery 是一個(gè)高度可定制的，可無限擴(kuò)展的插件，用來顯示相冊、幻燈片、旋轉(zhuǎn)木馬、滑動等效果， 實(shí)際上所有包含復(fù)雜效果的東西不超過10kb 。使用 Minimit Gallery 你可以將更多的時(shí)間放在構(gòu)思和界面的動態(tài)效果上，所有的邏輯功能將通過此插件來進(jìn)行管理。它是為JavaScript/Jquery 高級程序員設(shè)計(jì)的，因?yàn)槟阈枰帉懰械膭赢嫼拖鄡詷邮奖?。它已?jīng)在IE7+， Firefox， Safari 和 Chrome上測試通過。

??源代碼 & 示例??

22. Cycle 2

Cycle是一個(gè)相當(dāng)古老卻很流行的jQuery幻燈片插件。它現(xiàn)在有一個(gè)新的，改進(jìn)的版本:Cycle2.這個(gè)插件非常適用于任何想要?jiǎng)?chuàng)建完全自定義的幻燈片的人群，使用這個(gè)插件不需要聲明任何標(biāo)記語言或者樣式。功能上，它也很靈活。Cycle2支持響應(yīng)布局，對全部或單個(gè)的幻燈片有設(shè)置選項(xiàng)，并能通過全特性API輕易地得到拓展。

??源和演示??

23. Circular Content Carousel

這款插件用在在可以附著概要描述內(nèi)容的滑動條上，當(dāng)用戶點(diǎn)擊內(nèi)容時(shí)（圖片中的more按鈕），一個(gè)小的盒子會滑動到當(dāng)前盒子的旁邊，在那里用戶可以閱讀和看到與主題相關(guān)的詳細(xì)信息，并且滑動條還可以起到導(dǎo)航的作用。

??資源和范例??

24. Tooltipster

Tooltipster 是一個(gè) jQuery 插件，用來快速創(chuàng)建 HTML5驗(yàn)證 和靈活的工具提示。這個(gè)插件體積小小 (4.8kb 縮小后)，運(yùn)行速度快，并且能夠靈活定制。它的外觀可以通過CSS（主題支持）和箭頭的位置來改變。跟隨鼠標(biāo)，外觀的延遲/周期，都可以進(jìn)行定義。

??源代碼??

25. Colortip

它在你的頁面中把元素的title屬性轉(zhuǎn)化為一系列的多彩的工具提示(tooltips)。有6中顏色可用，所以你可以輕易地在你的設(shè)計(jì)中配色。在 colortip-1.0-jquery.js中，你還可以通過把附加的樣式類包含到樣式表，給顏色數(shù)組添加元素來創(chuàng)建自己的工具提示。

??源碼??

26. MasonJS

MasonJS，這個(gè)jQuery插件用來解決當(dāng)前大多數(shù)的網(wǎng)格系統(tǒng)相關(guān)的問題。當(dāng)使用Masonry,Isotope或者任何其他的網(wǎng)格插件,你的網(wǎng)格將會包含凹凸的邊緣和溝縫。Mason就是用來填充這些溝縫的。

MasonJS關(guān)注你的網(wǎng)格并查找所有構(gòu)成網(wǎng)格的元素。它創(chuàng)建了一個(gè)基于這些元素尺寸的完美網(wǎng)格陣列，并循環(huán)查找網(wǎng)格中的每一個(gè)元素塊來決定縫隙的位置。然后他就用填充元素填充縫隙，這是你可以定義或者在你的網(wǎng)格中復(fù)制元素。

??源碼??

27. Unslider

Unslider是一個(gè)只能滑動的jQuery滑塊插件。沒有奇特的滑動效果沒不需要標(biāo)記，并且它體積小于3kb。 它非常流暢，靈活，體積非常小。 Unslider已經(jīng)在所有最新的瀏覽器中測試過，并能在落后的瀏覽器中優(yōu)雅降級。你可以在需要的時(shí)候添加鍵盤指針支持。不是所有的滑動都一樣，Unslider也知道這一點(diǎn)。在沒有額外的代碼下，它能在高度上時(shí)尚地過渡。這些天你很難找到不能響應(yīng)的網(wǎng)站。Unslider回來了，它是完全響應(yīng)的。

??源碼??

28. Camera : 支持觸摸的jQuery幻燈片插件

Diapo的開發(fā)者已經(jīng)創(chuàng)建了一個(gè)新鮮的插件，叫做Camera，它帶有很多特性并在響應(yīng)式布局中工作良好?？梢酝ㄟ^HTML元素(圖像，文本，視頻等)來創(chuàng)建幻燈片，Camera會在一個(gè)外觀優(yōu)美的接口中顯示出來并帶有一系列的過渡效果。

??源碼??

29. Royal Slider

Royal Slider是一個(gè)jQuery插件，它可以在滑動片中顯示任何HTML內(nèi)容(圖像，視頻，文本等)，并帶有不凡的特性?；脽羝?0項(xiàng)可供定制，4套帶有PSD源文件的皮膚，9個(gè)預(yù)組件的模板(不斷更新)和所有的CSS樣式。在CSS3的動畫效果下(JS降級)，該插件工作在主流的瀏覽器中，并能在移動設(shè)備中響應(yīng)式輸出，運(yùn)行高速。同時(shí)，因?yàn)橛辛搜舆t加載功能(只加載部分項(xiàng)目),在有很多幻燈片的情況下，它也能快速完成加載。

??源碼??

30. Progression.js

Progression.js插件在用戶完成表格時(shí)提供實(shí)時(shí)提示和經(jīng)度更新。你所需要做的就是給你的表格一個(gè)唯一的ID。然后把數(shù)據(jù)進(jìn)度的數(shù)據(jù)屬性添加到每一個(gè)元素，這些元素是表格中的一個(gè)處理步驟。一旦你創(chuàng)建了表格，你就要初始化這個(gè)插件。

??源碼??

#p#

31. jQuery 顏色板

jQuery.swatches 是免費(fèi)的，用來將單行的div轉(zhuǎn)變?yōu)槠恋牟噬{(diào)色板。你可以按照希望的方式對其自定義。每一次對不同的選擇符調(diào)用swatchify()的時(shí)候，使用不同的類將會渲染出不同的色板組。

??下載??

32. jPages : JavaScript 驅(qū)動的分頁插件

jPages是一個(gè)客戶端的分頁腳本 (一個(gè) jQuery 插件) ，它具有鍵盤+滾動瀏覽，自動翻頁，延遲顯示以及自定義瀏覽面板的特性。同一個(gè)頁面可以插入任何數(shù)字的分頁元素，并且非常容易放置定位。

??下載??

33. FitText

FitText是一個(gè)簡單單功能性強(qiáng)的jQuery插件，它用來創(chuàng)建適應(yīng)已定義元素的文本。它能自動更新字體尺寸并，并自動適應(yīng)換行元素，保證不會因?yàn)樽煮w因素而造成布局崩潰,能在移動端或PC端瀏覽器中顯示頁面。

??下載??

34. FitVids.js

FitVids.js是一個(gè)輕量的，簡單易用的jQuery插件用于創(chuàng)建流暢的嵌入視頻。FitVids自動設(shè)置固有比率方法來在你的響應(yīng)式設(shè)計(jì)中完成創(chuàng)建流暢的視頻。

??下載??

35. Swipebox

Swipebox是一個(gè)jQuery燈箱插件，并支持觸摸事件，在響應(yīng)式布局中也工作良好。當(dāng)使用擦除手勢或者鍵盤事件時(shí)，它會顯示單個(gè)或者一組圖形性質(zhì)的元素。插件主要使用CSS過渡并在支持性不好的瀏覽器中提供jQuery降級。

??下載??

36. Turn.js

Turn.js是一個(gè)jQuery插件，它帶有可愛光滑的翻頁過渡效果。第一頁作為封面，剩余部分可以通過翻動頁面的任意角度來瀏覽。Turn.js只有15kb，可在移動端和平板瀏覽器中使用，并使用了硬件加速。

??下載??

37. imBookFlip

imBookFlip插件能在一個(gè)內(nèi)聯(lián)框架或者直接在整個(gè)頁面顯示出書本樣式的內(nèi)容。頁面可以設(shè)置為可翻動，用戶可以點(diǎn)擊或者通過自動播放來翻頁。悲哀的是，它不支持拖動翻頁效果。同樣，它的API允許直接指向目標(biāo)頁面。

??下載??

38. Booklet

Booklet可能是這個(gè)列表里選項(xiàng)最多的插件，它能配置每一個(gè)變量。JS翻頁效果不是很強(qiáng)大，因?yàn)樗３謨?nèi)容在范圍內(nèi)（不超過書本本身），但它工作健壯。可以通過鍵盤，前后鍵或者自動播放來翻頁。每一個(gè)頁面有一個(gè)唯一的URL（使用哈希標(biāo)簽）。它支持章節(jié)，顯示頁面號，回調(diào)交互。

??下載??

39. Gmaps.js

GMaps.js 是一款資源豐富的jQuery插件，它可以使消耗過高的谷歌地圖輕便化。此外，加入了一個(gè)特殊定位的標(biāo)準(zhǔn)地圖，我們可以定義其縮放比例，添加商場，得到用戶所在位置（HTML5 geolocation），定義了路徑，標(biāo)記出路線并且還有跟多內(nèi)容僅僅通過一小段代碼。

??下載??

40. JQVMap

JQVMap用來渲染矢量地圖的jQuery插件，它在現(xiàn)代瀏覽器中使用SVG，其余的瀏覽器中使用VML。這是一個(gè)基于jVectorMap插件高度修改的版本，帶有即用的世界地圖。有很多美化地圖的選項(xiàng)，如顏色，邊框或模糊。

??下載??  

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

譯文鏈接：??http://www.oschina.net/translate/40-jquery-plugins-to-improve-your-website??