50 個 jQuery 外掛可將你的網站帶到另一個高度_jquery

Web領域一直在變化並且其邊界在過去的每一天都在發生變化（甚至不能以小時為計），隨著其邊界的擴展取得了許多新發展。在這些進步之中，開發者的持續工作創造了更大和更好的腳本，這些腳本以插件方式帶來更好的終端用戶體驗，它們比原來更輕量級，還有更強的處理能力。

關鍵是這些新發展的腳本和插件是能建立響應式Web的，而且還不會喪失它們原有的功能特性——除了更優秀和更輕巧（就文件大小而言）之外，它們還不會增加頁面載入的時間。

透過瀏覽文檔，要掌握JQuery的語法是很容易的。它可以支援選擇DOM元素，創建動畫，處理事件，開發Ajax應用，甚至還為開發者提供了基於JavaScript類別庫之上創建插件的能力。

jQuery架構的開發人員能夠創建一個插件程式碼來擴展其功能，從而能夠產生一些最好的插件，讓你的網站或任何給定的專案達到一個全新的水平。

在這篇文章中，我們已經累積了一些供你挑選的最佳JQuery插件，這些插件提供了各種的功能和特性能夠讓你的網頁呈現許多可想像到的效果。我們希望你能夠在下面的清單中找到你正在尋找的插件。

在下面的評論區域讓我們知道哪些外掛你以前使用過或你正在考慮在將來的專案或網站中使用哪些外掛程式。

1. FlickerPlate

Flickerplate是一個可以讓你彈出內容的易用jQuery插件。它也依賴Modernizr來進行觸碰偵測和在觸碰事件使用jQuery.Finger函式庫。 Flickerplate透過很多方式配置。你可以透過Javascript調用來設定選項。或者你可以透過在實際的元素上透過data屬性來設定選項。

2. Tagging JS

TaggingJS 是一個用來創建高度可自訂的前端標籤系統的jQuery插件。它小於3 kb並且支援世界上大部分瀏覽器。它是基於MIT 許可。

3. Scroll Magic

ScrollMagic 是一個神奇滾動互動的jQuery插件，ScrollMagic允許你像進度條一樣使用捲軸。如果你想在指定滾動位置啟動動畫，保持和滾動條運動同步動畫，並固定一個元素到指定滾動位置（粘性元素），這就是為你而設的插件。

32. jPages : JavaScript Powered Pagination

jPages 是一個客戶端分頁腳本（一個jQuery插件），具有像鍵盤+滾動導航，自動換頁，延遲展示和一個可自定義的導航面板的特性。分頁元素的任意頁數能夠插入相同的頁面，並且能夠輕易定位。

5. PNotify

PNotify 是一個由SciActive 開發的 JavaScript的通知插件，曾用名Pines Notify。它的設計理念是提供一個極度靈活而又非常容易實現和使用。它可以提供非阻塞的通知。允許用戶在不關閉它的情況下點擊通知後面的元素。 PNotify 使用了Bootstrap 和 jQuery UI來定義樣式，這意味著可以非常容易的對它進行自訂主題樣式。

6. Wholly

Wholly 是一個jQuery的插件用來觸發表格列上的mouseenter 和 mouseleave事件。 Wholly 用來高亮整個表格列，並且支援表格的colspan和rowspan屬性。如果你想要支援colspan和rowspan屬性，那麼首先你需要建立表格單元格的索引(cell index)。之後，你需要追蹤表格所有單元格的事件，找出你感興趣的，併計算出它們在矩陣中的offset以及共享同一個垂直索引(vertical index)的列。 Wholly在設定特定樣式方面是沒有任何限制的。

7. MixitUp

MixItUp 是一個jQuery插件，提供動畫過濾和排序。在管理容易歸類或像資料夾一樣的有序內容和部落格時非常不錯，但是也能作為一個吸引人的應用UI和資料視覺化的一個強大的工具起作用。

8. Velocity.js

Velocity是一個jQuery插件，它重新實現了$.animate() 同時包括改善動畫流程的新特性(使得Velocity也比CSS動畫庫更快)，用來產生性能顯著的動畫。

9. rowGrid

rowGrid.js是一個小的，輕量級(gzip後大約700 位元)的 jQuery插件，用來在徑直的行裡放置圖片 (或其他內容項目)。網格類似Google圖片搜索，flickr，shutterstock 和Google+ 圖片的網格。 rowGrid.js 是響應式的，它允許使用者無限滑動。所有的內容項擁有相同的高度，但寬度是可變的。

10. Croppic

Croppic 是一個圖片裁切jquery外掛。它能提供滿足你的需求外更多的功能。 簡單上傳一張圖片，然後你能夠按照你喜歡的放大縮小的實際情況來裁剪圖片。它需在IE 10+， chrome，和firefox才能正常運作。它使用FormData所以現在不支援IE9和之前的版本。

11. ImageLightbox.js

ImageLightbox.js是一個難以置信簡單，響應式，觸碰友好燈箱效果的腳本。它是由可擴展的，可配置的，極簡化的(瘦身後只有4kb)，並且使用CSS變形和轉換來移動圖片。

12. jQuery Tip Cards

Tip Cards 外掛程式可讓你建立在Google Tips頁面上看到的使用類似卡片互動的cards佈局。有幾種新的動畫選項，所以你可以按你喜歡的進行人性化自訂。你可以在模態視窗開啟或關閉的時候，使用回調方法來進行操作。已在像Chrome，Firefox和Safari的桌面現代瀏覽器測試過。

13. Floatlable.js

在Brad Frost寫一篇關於浮動標籤模式的部落格文章後，浮動標籤模式取得了成功。這個想法是基於Matt D Smith 的Dribbble Shot。這種模式很容易解釋。當使用者使用一個輸入欄位互動時，placeholder的值會向上移，並在類型文字上方顯示。

14. Nanogallery

nanoGallery對jQuery來說很容易實現圖片畫冊插件。它具有許多特性：支援觸碰，響應式，快速且支援雲端儲存。 相簿多級導航，燈箱效果，許多縮圖的hover效果，滑動展示，全屏，分頁，圖片延遲加載，主題，兼容bootstrap，可定制，可從Flickr/Picasa/Google+拉取照片等等。

15. jQuery Panorma Viewer

jQuery Panoram Viewer 幫助你在網站內嵌Panorama圖片。使用這個插件，你能夠在你的網站上顯示你的Panorama圖片。為了做到這些，首先你必須在你的文件中包含最新的JQuery庫和jquery.panorama_viewer.js以及panorama_viewer.css，然後在HTML上給你的圖片增加"panorama"類別。現代瀏覽器例如Chrome,Firefox和Safari的桌面和行動版本都已經測試通過。

16. SVG Magic

SVGMagic是一個跨瀏覽器的兼容JQuery插件，它搜尋你網站上的SVG圖片，如果瀏覽器不支援SVG，自動的創建PNG版本。它是簡單的，單一目的的插件，不需要配置。

17. BttrLazyLoading

BttrLazyLoading是個允許你的網頁應用在視窗裡面只載入圖片的jQuery外掛。它也允許你在4個不同螢幕尺寸裡擁有不同版本的圖片。 BttrLazyLoading允許你的網頁應用程式延遲載入圖片，直到被捲動到圖片。這樣的方式下，頁面載入時間大幅減少。

18. Remodal

Remodal 是一個扁平化，響應式，輕量級，高速，易定制的，聲明性狀態註釋和哈希追踪的模態窗口插件。所有的現代瀏覽器都支援。你可以輕易地定義模態背景容器（就像一次失焦效果）。

19. Slinky.js

Slinky.js 是一個用於使用堆疊頭部建立滑動導航清單的jQuery插件 。它有無數的特性：就像透過停用遊標事件來平滑滑動，壓縮後大約1KB的輕量級，在視窗重調大小和DOM改變上刷新，還有和你喜歡的最新版本的瀏覽器相容。

20. Adaptive Backgrounds

Adaptive Backgrounds 是一個jQuery插件，用在從圖片抽取主要顏色和應用到父元素。這個外掛利用了畫布元素和ImageData對象，歸根結底其跨站安全限制，如果某個腳本試圖從非當前網域主機抽取圖片的顏色將會失敗，除非圖片允許跨來源資源共用。

21. Bigfoot

網頁的註腳是煩人的。你點了一個小數字，跳到頁面底部附近，找到你尋找的腳註，然後點擊一個連結回到頁面原來的地方。 Bigfoot看起來讓整個處理流程不再痛苦。它會自動偵測腳註連結和內容，將連結轉換成一個容易點擊的按鈕，當讀者點擊腳註按鈕的時候彈出浮窗（譯註：官方演示的版本是直接跳轉）。

22. Dynatable

Dynatable是一個使用jQuery，HTML5和JSON的，更有趣的，語義化的，互動表格插件。 而且不僅是用在表格上。 Dynatable 的目的是提供一個簡單的、可擴展的 API，能夠輕鬆地瀏覽和操作大數據集。

23. jQuery Label Better

jQuery Label Better 就像個優雅動畫的老大一樣幫助你在表單輸入上不佔空間地定標籤。這個外掛最獨特的是你需要做的所有工作只是添加一個佔位符的文本，我們將在當用戶需要的時候顯示標籤。

24. Stickup

stickUp 是一個jQuery 外掛。你可以在任意使用jQuery的網頁上執行。你可以簡單地在任意頁面創建任意你想用戶在任何時候都可以看見的元素，只要用戶滑超它，就會粘到瀏覽器視窗的頂部。

25. Free Wall

Freewall是一個跨瀏覽器響應式的jQuery插件，它使用很棒的CSS3動畫效果和回調事件，能幫你創建很多類型網格佈局：可伸縮佈局，圖片佈局，嵌套網格，流式網格，metro風格網格，類別品趣格網格。 Freewall是個創建桌面，行動和平板的動態網格佈局的一體化解決方案。

26. jQuery Interactive 3D

jQuery Interactive 3D是一個允許我們使用多圖完成一個類似功能的插件。 使用起來簡單，使用簡單的函數和指定一組名字的圖片。 還有，還擁有客製化的可選項，例如遊標圖標，速度，支援觸控螢幕，自動播放等等。

27. Succinct

Succinct是一個用作截斷多行文字的jQuery小插件。它縮短你的文字到指定的尺寸，並在後面添加省略號。你可以用選擇器指定要截斷的元素，然後設定你想看到的數量的尺寸參數。

28. SlideMe

SlideMe!是一個響應式樣的，CSS3相容的jQuery滑動條插件，它同時支援受限的和全螢幕的視圖。它能用在垂直屏幕和橫屏， 使用了CSS3轉換和支援分頁。提供控制滑動的方法(prev, next等)，還有它們及更多方法對應的回呼方法。

29. Glide.js

Glide.js是一個輕量級（壓縮後4.5kb）的jQuery插件，用於建立滑桿。其具有完全可自訂的OOCSS標記及CSS3轉換，而且可以回呼JavaScript。此滑桿是響應式的；其能適應所有的設備並對觸摸的支援。你可以透過鍵盤、滑動事件、彈跳窗或箭頭選單來控制元素。 Glide.js也有支援所有的事件（播放，暫停，下一步，上一步，等）公共的API。

30. PhotoJShop

PhotoJShop是一個讓我們可以對影像套用簡單效果及濾鏡的jQuery外掛。這些過濾器包括模糊、底片、浮雕、減輕、變黑、黑白、銳利化以及更多。插件可以在canvas和圖像上工作，並且過濾器很容易使用。

31. One Page Scroll

One Page Scroll是一個jQuery插件，其簡化了創建類似網站的難度。它只需要很少的設置，只需要創建HTML結構，調用函數你就已經就緒了。可選的，作為附加功能，其速度和循環行為也可以設定。而且它支援每個頁面的SEO友善URL。

32. FerroSlider

FerroSlider是一個用於創建整頁（或者是內容/圖像滑塊）等幾乎所有類型滑塊的jQuery插件。內容可以以靈活的方式放置，水平或垂直，插件都能夠使得瀏覽起來很容易。為提高性能它使用了CSS3變換，能夠與響應式佈局良好配合且能應用在行動平台上。

33. Scrolld.js

Scrolld.js是一個獨特的jQuery開源外掛。 Scrolld.js使用即時更新的資料為像素級佈局和導航提供了一個高度精確的滾動。使用Scrolld.js ，你總是能精確的滾動到指定目標並且總是提供最好的使用者體驗。

34. AnimateScroll

AnimateScroll是一個簡單的jQuery插件，可以用來添加鬆弛的滾動條效果。你可以自訂捲軸樣式（30多個滾動效果）以及滾動速度。 “padding”屬性可以控制捲軸的結束位置。該外掛不僅限於整個的body頁面，而且可以用於指定的元素。

35. MasonJS

MasonJS jQuery 外掛是用來解決目前大部分網格系統都會遇到的問題，縫隙。當使用Masonry, Isotope 或任何其他網格插件時，你的網格有時總是會出現縫隙或不均勻的邊。 Mason就是用來填充他們的。

36. JInvertScroll

jInvertScroll 是一個控制預設滾動行為和強制縱向滾動的jQuery插件。該插件足夠輕量級（小於1kb）且幾乎不需要設定便可使用。為包裝元素新增指定類別並且呼叫JS函數就可以了。另外它可以用onScroll回呼（我們可以決定調整任一元素的地方）輕易創造視察效果。

37. Flowtype.js

FlowType.JS是一個可以自動調整字體大小（font-size）和行號（line-height）的jQuery插件（根據包裝元素的寬度），使得我們的內容可以像我們希望的那樣顯示。該插件提供了設定最小/最大字體尺寸和寬度的屬性。

38. nProgress

NProgress.js是一個奈米進度條。以現實的細膩的動畫告訴用戶正在發生的事情。它是一個靈感源自Google，YouTube，和Medium的輕量級的進度條，完美適用於Turbolinks, Pjax,以及其他 Ajax等級的應用。

39. Tidy Time.js

想使用對人友善的語言，來展示一個基於時間的更新？ TidyTime.js就是個做這事的插件，它轉換標準的時間格式到個人聲明的時間格式。

40. Fullpage.js

FullPage.js是一個簡單易用的插件，用來創建全螢幕滑動網頁（也被認為是單頁網站）。它允許你創建全螢幕滑動網站的同時，也添加一些橫向列印風格的輪播器到網站的各個部分。它被設計成適用於不同螢幕尺寸，以及平板和行動裝置。

41. jQuery Flat Shadow

jQuery Flat Shadow是一個可以為你想的任何東西添加衰退陰影的插件。它能夠定義陰影顏色，角度和啟用禁用陰影衰退。

42. Owl Carousel

Owl Carousel 是一個允許你快速建立響應式旋轉滑動條的jQuery插件。外掛是觸碰友善並且擁有任意表示的任意HTML內容的特色。它有可選項用來設定分頁/滑動速度，啟用/停用自動播放，顯示插入導覽和其它。

43. S Gallery

S Gallery是另一個在響應式方格展示圖片的jQuery圖片畫冊插件。其靈感來自Sony的產品頁面畫冊 (使用Flash製作) ，並完整地模仿了它。一當一個圖片項目被點擊和獲得焦點，就可以使用向前-向後按鈕或透過鍵盤瀏覽其他的圖片項目。

44. Pop Easy

PopEasy是一個輕量級jQuery插件，對於一個開發人員簡單建立模態視窗是必須的。透過在你的頁面上應用一個遮罩並打開一個可自訂的彈出模態窗口，把焦點放在重要的元素上。

45. Scroll Up

ScrollUp是一個輕量級的jQuery插件，用來創建自訂的「滑動到頂部」功能，可以簡單地用到任何網站。透過指定一個有效的CSS顏色到activeOverlay設置，創建一個可視線來幫助確定距離頂部的理想滑動距離。

46. Mobiscroll

Mobiscroll是一個用在觸控螢幕裝置（Android手機，iPhone，iPad，Galaxy Tab）上的輪滑跑馬燈，或是日期時間拾取器的jQuery插件。控制器能輕鬆地進行自訂以支援任意自訂值，甚至直接作為原生的選擇控制器（下拉清單）的替代方案使用。控制器是可以主題化的。在CSS裡你能輕易改變外觀。它也支援預定義，好看的顏色模式。已在iOS4，Android 2.2，Android 2.3，Chrome，Safari，Firefox，IE9上測試過。

47.Cycle2

Cycle，是過去的一個非常受歡迎的jQuery幻燈片播放插件，現在有了一個增強的版本：Cycle2.該插件對於那些期待創建完全個性化的幻燈片展示效果的人是非常完美的，因為它沒有聲明任何標記或樣式。並且，它的功能非常靈活。 Cycle2支援反應靈敏的佈局，幾乎包含應對所有的選項（全域或單張投影片），透過使用全部特性的API，還可以非常輕鬆的進行擴充。

48.Tooltipster

Tooltipster 是一個 jQuery 插件，用於快速建立 HTML5 驗證和靈活的工具提示。該插件屬於“麻雀雖小，五髒俱全”的類型，壓縮後僅4.8kb，但是工作起來非常快，並且可以輕鬆的定制。它的外觀可以用 CSS （主題支援） 和箭頭進行修改，跟隨滑鼠的位置改變，延遲等外觀特效都可以定義。

49.FitText

FitText是一個非常簡單但是卻功能強大的jQuery插件，可用來確保文字能夠適應已定義好的元素。它會根據元素環繞它的寬度自動更新字體大小，並保證佈局不會太零碎（因為字體大小），即使頁面是在桌面瀏覽器或行動裝置中顯示。還有，該插件提供了一些選項微調，包括設定"水平縮放"的能力和尺寸的最小到最大。

50. Unslider

Unslider是且僅是用於圖片展示的jQuery滑桿外掛。沒有華麗的特效和多餘的裝飾，插件小於3kb。它是流暢、靈活，令人難以置信的小。 Unslider已經在目前所有的瀏覽器最新版本中進行了測試，再不是那麼新的瀏覽器中，只能看到它「落寞的輝煌」。如果你需要，你可以加入鍵盤方向鍵支援。不是所有的滑桿外掛都生來平等，Unslider深知這一點。 （譯者：作者在賣萌麼？）