50個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深知這一點。（譯者：做者在賣萌麼？）