Web領(lǐng)域一直在發(fā)生變化并且其邊界在過去的每一天都在發(fā)生變化（甚至不能以小時(shí)為計(jì)），隨著其邊界的擴(kuò)展取得了許多新發(fā)展。在這些進(jìn)步之中，開發(fā)者的不斷工作創(chuàng)造了更大和更好的腳本，這些腳本以插件方式帶來更好的終端用戶體驗(yàn)，它們比原來更輕量級(jí)，還有更強(qiáng)的處理能力。

關(guān)鍵是這些新發(fā)展起來的腳本和插件是能構(gòu)建響應(yīng)式Web的，而且還不會(huì)喪失它們?cè)械墓δ芴匦浴烁鼉?yōu)秀和更輕巧（就文件大小而言）之外，它們還不會(huì)增加頁(yè)面加載的時(shí)間。

通過瀏覽文檔，掌握J(rèn)Query的語(yǔ)法是很容易的。它可以支持選擇DOM元素，創(chuàng)建動(dòng)畫，處理事件，開發(fā)Ajax應(yīng)用，甚至還為開發(fā)者提供了基于JavaScript類庫(kù)之上創(chuàng)建插件的能力。

jQuery架構(gòu)的開發(fā)人員能夠創(chuàng)建一個(gè)插件代碼來擴(kuò)展其功能，從而能夠產(chǎn)生一些最好的插件，讓你的網(wǎng)站或任何給定的項(xiàng)目達(dá)到一個(gè)全新的水平。

在這篇文章中，我們已經(jīng)積累了一些供你挑選的最佳JQuery插件，這些插件提供了各種的功能和特性能夠讓你的網(wǎng)頁(yè)呈現(xiàn)許多可想象到的效果。我們希望你能夠在下面的列表中找到你正在尋找的插件。

在下面的評(píng)論區(qū)域讓我們知道哪些插件你以前使用過或者你正在考慮在將來的項(xiàng)目或網(wǎng)站中使用哪些插件。

1. FlickerPlate

Flickerplate是一個(gè)可以讓你彈出內(nèi)容的易用jQuery插件。它也依賴Modernizr來進(jìn)行觸碰檢測(cè)和在觸碰事件使用jQuery.Finger庫(kù)。Flickerplate通過很多種方式配置。你可以通過Javascript調(diào)用來設(shè)置選項(xiàng)。或者你可以通過在實(shí)際的元素上通過data屬性設(shè)置選項(xiàng)。

2. Tagging JS

TaggingJS 是一個(gè)用來創(chuàng)建高度可定制的前端標(biāo)簽系統(tǒng)的jQuery插件。它小于3 kb并且支持世界上大部分瀏覽器。它基于MIT 許可。

3. Scroll Magic

ScrollMagic 是一個(gè)神奇滾動(dòng)交互的jQuery插件，ScrollMagic允許你像進(jìn)度條一樣使用滾動(dòng)條。如果你想在指定滾動(dòng)位置啟動(dòng)一個(gè)動(dòng)畫，保持和滾動(dòng)條運(yùn)動(dòng)同步動(dòng)畫，并固定一個(gè)元素到指定滾動(dòng)位置（黏性元素），這就是為你而設(shè)的插件。

32. jPages : JavaScript Powered Pagination

jPages 是一個(gè)客戶端分頁(yè)腳本（一個(gè)jQuery插件），具有像鍵盤+滾動(dòng)導(dǎo)航，自動(dòng)換頁(yè)，延遲展示和一個(gè)可自定義的導(dǎo)航面板的特性。分頁(yè)元素的任意頁(yè)數(shù)能夠插入到相同的頁(yè)面，并且能夠輕易定位。

5. PNotify

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

6. Wholly

Wholly 是一個(gè)jQuery的插件用來觸發(fā)表格列上的mouseenter 和 mouseleave事件。Wholly 用來高亮整個(gè)表格列，并且支持表格的colspan和rowspan屬性。如果你想要支持colspan和rowspan屬性，那么首先你需要構(gòu)建表格單元格的索引(cell index)。之后，你需要追蹤表格所有單元格的事件，找出你感興趣的，并計(jì)算出它們?cè)诰仃囍械膐ffset以及共享同一個(gè)垂直索引(vertical index)的列。Wholly在設(shè)定特定樣式方面是沒有任何限制的。

7. MixitUp

MixItUp 是一個(gè)jQuery插件，提供動(dòng)畫過濾和排序。在管理容易歸類或者像文件夾一樣的有序內(nèi)容和博客時(shí)非常不錯(cuò)，但是也能作為一個(gè)吸引人的應(yīng)用UI和數(shù)據(jù)可視化的一個(gè)強(qiáng)大的工具起作用。

8. Velocity.js

Velocity是一個(gè)jQuery插件，它重新實(shí)現(xiàn)了$.animate() 同時(shí)包括改善動(dòng)畫流程的新特性(使得 Velocity也比CSS動(dòng)畫庫(kù)更快)，用來產(chǎn)生性能顯著的動(dòng)畫。

9. rowGrid

rowGrid.js是一個(gè)小的，輕量級(jí)(gzip后大約700 比特)的 jQuery插件，用來在徑直的行里放置圖片 (或者其他內(nèi)容項(xiàng))。網(wǎng)格類似Google圖片搜索，flickr，shutterstock 和Google+ 圖片的網(wǎng)格。rowGrid.js 是響應(yīng)式的，它允許用戶無限滑動(dòng)。所有的內(nèi)容項(xiàng)擁有相同的高度，但寬度是可變的。

10. Croppic

Croppic 是一個(gè)圖片裁切jquery插件。它能提供滿足你的需求外更多的功能。 簡(jiǎn)單上傳一張圖片，然后你能夠按照你喜歡的放大縮小的實(shí)際情況來裁剪圖片。它需在IE 10+， chrome，和firefox才能正常工作。它使用FormData所以現(xiàn)在不支持IE9和之前的版本。

11. ImageLightbox.js

ImageLightbox.js是一個(gè)難以置信簡(jiǎn)單，響應(yīng)式，觸碰友好燈箱效果的腳本。它是由可擴(kuò)展的，可配置的，極簡(jiǎn)化的(瘦身后只有4kb)，并且使用CSS變形和轉(zhuǎn)換來移動(dòng)圖片。

12. jQuery Tip Cards

Tip Cards 插件允許你創(chuàng)建你在Google Tips頁(yè)面看到的使用類似卡片交互的cards布局。有幾種新的動(dòng)畫選項(xiàng)，所以你可以按你喜歡的進(jìn)行人性化定制。你可以在模態(tài)窗口打開或者關(guān)閉的時(shí)候，使用回調(diào)方法來進(jìn)行操作。已在像Chrome，F(xiàn)irefox和Safari的桌面現(xiàn)代瀏覽器測(cè)試過。

13. Floatlable.js

在Brad Frost寫一篇關(guān)于浮動(dòng)標(biāo)簽?zāi)Ｊ降牟┛臀恼潞螅?dòng)標(biāo)簽?zāi)Ｊ饺〉昧顺晒?。這想法是基于Matt D Smith 的Dribbble Shot。這種模式很容易解釋。在用戶使用一個(gè)輸入字段交互時(shí)，placeholder的值向上移，并在類型文本上面顯示。

14. Nanogallery

nanoGallery對(duì)jQuery來說很容易實(shí)現(xiàn)圖片畫冊(cè)插件。它具有很多特性：支持觸碰，響應(yīng)式，快速和支持云儲(chǔ)存。 相冊(cè)多級(jí)導(dǎo)航，燈箱效果，許多縮略圖的hover效果，滑動(dòng)展示，全屏，分頁(yè)，圖片延遲加載，主題，兼容bootstrap，可定制，可從Flickr/Picasa/Google+拉取照片等等。

15. jQuery Panorma Viewer

jQuery Panoram Viewer 幫助你在網(wǎng)站內(nèi)嵌Panorama圖片。使用這個(gè)插件，你能夠在你的網(wǎng)站顯示你的Panorama圖片。為了做到這些，首先你不得不在你的文檔中包含最新的JQuery庫(kù)和jquery.panorama_viewer.js以及panorama_viewer.css，然后在HTML上給你的圖片增加"panorama"類?，F(xiàn)代瀏覽器例如Chrome,Firefox和Safari的桌面和移動(dòng)版本都已經(jīng)測(cè)試通過。

16. SVG Magic

SVGMagic是一個(gè)跨瀏覽器的兼容JQuery插件，它搜索你網(wǎng)站上的SVG圖片，如果瀏覽器不支持SVG，自動(dòng)的創(chuàng)建PNG版本。它是簡(jiǎn)單的，單一目的的插件，不需要配置。

17. BttrLazyLoading

BttrLazyLoading是個(gè)允許你的網(wǎng)頁(yè)應(yīng)用在窗口里面只加載圖片的jQuery插件。它也允許你在4個(gè)不同屏幕尺寸里擁有不同版本的圖片。BttrLazyLoading允許你的網(wǎng)頁(yè)應(yīng)用延遲加載圖片，直到被滾動(dòng)到圖片。這樣的方式下，頁(yè)面加載時(shí)間大幅度減少。

18. Remodal

Remodal 是一個(gè)扁平化，響應(yīng)式，輕量級(jí)，高速，易定制的，聲明性狀態(tài)注釋和哈希追蹤的模態(tài)窗口插件。所有的現(xiàn)代瀏覽器都支持。你可以輕易地定義模態(tài)背景容器（就像一次失焦效果）。

19. Slinky.js

Slinky.js 是一個(gè)用在使用堆疊頭部創(chuàng)建滑動(dòng)導(dǎo)航列表的jQuery插件 。它有無數(shù)的特性：就像通過禁用光標(biāo)事件來平滑滑動(dòng)，壓縮后大約1KB的輕量級(jí)，在窗口重調(diào)大小和DOM改變上刷新，還有和你喜歡的最新版本的瀏覽器兼容。

20. Adaptive Backgrounds

Adaptive Backgrounds 是一個(gè)jQuery插件，用在從圖片抽取主要顏色和應(yīng)用到父元素。這個(gè)插件利用了畫布元素和ImageData對(duì)象，歸根于其跨站安全限制，如果某個(gè)腳本試圖從非當(dāng)前域名主機(jī)抽取圖片的顏色將會(huì)失敗，除非圖片允許跨源資源共享。

21. Bigfoot

網(wǎng)頁(yè)的腳注是煩人的。你點(diǎn)了一個(gè)小數(shù)字，跳轉(zhuǎn)到頁(yè)面底部附近，找到你尋找的腳注，然后點(diǎn)擊一個(gè)鏈接回到頁(yè)面原來的地方。Bigfoot看起來讓整個(gè)處理流程不再痛苦。它自動(dòng)檢測(cè)腳注鏈接和內(nèi)容，將鏈接轉(zhuǎn)化成一個(gè)容易點(diǎn)擊的按鈕，當(dāng)讀者點(diǎn)擊腳注按鈕的時(shí)候彈出浮窗（譯注：官方演示的版本是直接跳轉(zhuǎn)）。

22. Dynatable

Dynatable是一個(gè)使用jQuery，HTML5和JSON的，更有趣的，語(yǔ)義化的，交互表格插件。 并且不僅是用在表格上。Dynatable 的目的是提供一種簡(jiǎn)單的、可擴(kuò)展的 API，能夠輕松地瀏覽和操作大數(shù)據(jù)集。

23. jQuery Label Better

jQuery Label Better 就像個(gè)優(yōu)雅動(dòng)畫的老大一樣幫助你在表單輸入上不占空間地定標(biāo)簽。這個(gè)插件最獨(dú)特的是你需要做的所有工作僅是添加一個(gè)占位符的文本，我們將在當(dāng)用戶需要的時(shí)候顯示標(biāo)簽。

24. Stickup

stickUp 是一個(gè)jQuery 插件。你可以在任意使用jQuery的網(wǎng)頁(yè)上執(zhí)行。你可以簡(jiǎn)單地在任意頁(yè)面創(chuàng)建任意你想用戶在任何時(shí)候都可以看見的元素，只要用戶滑超它，就會(huì)粘到瀏覽器窗口的頂部。

25. Free Wall

Freewall是一個(gè)跨瀏覽器響應(yīng)式的jQuery插件，它使用很棒的CSS3動(dòng)畫效果和回調(diào)事件，能幫你創(chuàng)建很多類型網(wǎng)格布局：可伸縮布局，圖片布局，嵌套網(wǎng)格，流式網(wǎng)格，metro風(fēng)格網(wǎng)格，類品趣志網(wǎng)格。Freewall是個(gè)創(chuàng)建桌面，移動(dòng)和平板的動(dòng)態(tài)網(wǎng)格布局的一體化解決方案。

26. jQuery Interactive 3D

jQuery Interactive 3D是一個(gè)允許我們使用多圖完成一個(gè)類似功能的插件。 使用起來簡(jiǎn)單，使用簡(jiǎn)單的函數(shù)和指定一組名字的圖片。 還有，還擁有定制化的可選項(xiàng)，比如光標(biāo)圖標(biāo)，速度，支持觸屏，自動(dòng)播放等等。

27. Succinct

Succinct是一個(gè)用作截?cái)喽嘈形谋镜膉Query小插件。它縮短你的文本到指定的尺寸，并在后面添加省略號(hào)。你可以用選擇器指定要截?cái)嗟脑?，然后設(shè)置你想看到的數(shù)量的尺寸參數(shù)。

28. SlideMe

SlideMe!是一個(gè)響應(yīng)式樣的，CSS3兼容的jQuery滑動(dòng)條插件，它同時(shí)支持受限的和全屏的視圖。它能用在豎屏和橫屏， 使用了CSS3轉(zhuǎn)換和支持分頁(yè)。提供控制滑動(dòng)的方法(prev, next等)，還有它們及更多方法對(duì)應(yīng)的回調(diào)方法。

29. Glide.js

Glide.js是一個(gè)輕量級(jí)（壓縮后4.5kb）的jQuery插件，用于創(chuàng)建滑塊。其具有完全可定制的OOCSS標(biāo)記及CSS3轉(zhuǎn)換，而且可以回調(diào)JavaScript。該滑塊是響應(yīng)式的；其能適應(yīng)所有的設(shè)備并有對(duì)觸摸的支持。你可以通過鍵盤、滑動(dòng)事件、彈窗或箭頭菜單來控制元素。Glide.js還有支持所有的事件（播放，暫停，下一步，上一步，等）公共的API。

30. PhotoJShop

PhotoJShop是一個(gè)允許我們對(duì)圖像應(yīng)用簡(jiǎn)單效果及過濾器的jQuery插件。這些過濾器包括模糊、底片、浮雕、減輕、變黑、黑白、銳化以及更多。插件可以在canvas和圖像上工作，并且過濾器很容易使用。

31. One Page Scroll

One Page Scroll是一個(gè)jQuery插件，其簡(jiǎn)化了創(chuàng)建類似網(wǎng)站的難度。它只需要很少的設(shè)置，只需要?jiǎng)?chuàng)建HTML結(jié)構(gòu)，調(diào)用函數(shù)你就已經(jīng)就緒了?？蛇x的，作為附加功能，其速度和循環(huán)行為也可以設(shè)置。而且它支持每個(gè)頁(yè)面的SEO友好型URL。

32. FerroSlider

FerroSlider是一個(gè)用于創(chuàng)建整頁(yè)面（或者是內(nèi)容/圖像滑塊）等幾乎所有類型滑塊的jQuery插件。內(nèi)容可以以靈活的方式放置，水平或垂直，插件都能夠使得瀏覽起來很容易。為提高性能它使用了CSS3變換，能夠與響應(yīng)式布局良好配合且能應(yīng)用在移動(dòng)平臺(tái)上。

33. Scrolld.js

Scrolld.js是一個(gè)獨(dú)特的jQuery開源插件。Scrolld.js使用實(shí)時(shí)更新的數(shù)據(jù)為像素級(jí)布局和導(dǎo)航提供了一個(gè)高度精確的滾動(dòng)。使用Scrolld.js ，你總能精確的滾動(dòng)到指定目標(biāo)并且總能提供最好的用戶體驗(yàn)。

34. AnimateScroll

AnimateScroll是一個(gè)簡(jiǎn)單的jQuery插件，可以用來添加松弛的滾動(dòng)條效果。你可以自定義滾動(dòng)條樣式（30多個(gè)滾動(dòng)效果）以及滾動(dòng)速度?！皃adding”屬性可以控制滾動(dòng)條的結(jié)束位置。該插件不僅限于整個(gè)的body頁(yè)面，而且可以用于指定的元素。

35. MasonJS

MasonJS jQuery 插件是用來解決大部分網(wǎng)格系統(tǒng)目前都會(huì)遇到的問題，縫隙。當(dāng)使用Masonry, Isotope 或任何其他網(wǎng)格插件時(shí)，你的網(wǎng)格有時(shí)總會(huì)出現(xiàn)縫隙或參差不齊的邊。Mason就是用來填充他們的。

36. JInvertScroll

jInvertScroll 是一個(gè)控制默認(rèn)滾動(dòng)行為和強(qiáng)制縱向滾動(dòng)的jQuery插件。該插件足夠輕量級(jí)（小于1kb）并且?guī)缀醪恍柙O(shè)置便可使用。為包裝元素添加指定類并且調(diào)用JS函數(shù)就可以了。另外它可以用onScroll回調(diào)（我們可以決定調(diào)整任一元素的地方）輕易創(chuàng)建視察效果。

37. Flowtype.js

FlowType.JS是一個(gè)可以自動(dòng)調(diào)整字體大?。╢ont-size）和行號(hào)（line-height）的jQuery插件（根據(jù)包裝元素的寬度），使得我們的內(nèi)容可以像我們希望的那樣顯示。該插件提供了設(shè)定最小/最大字體尺寸和寬度的屬性。

38. nProgress

NProgress.js是一個(gè)納米進(jìn)度條。以現(xiàn)實(shí)的細(xì)膩的動(dòng)畫告訴用戶正在發(fā)生的事情。它是一個(gè)靈感源于Google，YouTube，和Medium的輕量級(jí)的進(jìn)度條，完美適用于Turbolinks, Pjax,以及其他 Ajax級(jí)別的應(yīng)用。

39. Tidy Time.js

想使用對(duì)人友好的語(yǔ)言，來展示一個(gè)基于時(shí)間的更新？TidyTime.js就是個(gè)做這事的插件，它轉(zhuǎn)化標(biāo)準(zhǔn)的時(shí)間格式到個(gè)人聲明的時(shí)間格式。

40. Fullpage.js

FullPage.js是一個(gè)簡(jiǎn)單易用的插件，用來創(chuàng)建全屏滑動(dòng)網(wǎng)頁(yè)（也被認(rèn)為是單頁(yè)面網(wǎng)站）。它允許你創(chuàng)建全屏滑動(dòng)網(wǎng)站的同時(shí)，也添加一些橫向打印風(fēng)格的輪播器到站點(diǎn)的各個(gè)部分。它被設(shè)計(jì)成適用于不同屏幕尺寸，以及平板和移動(dòng)設(shè)備。

41. jQuery Flat Shadow

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

42. Owl Carousel

Owl Carousel 是一個(gè)允許你快速創(chuàng)建響應(yīng)式旋轉(zhuǎn)滑動(dòng)條的jQuery插件。插件是觸碰友好并且擁有任意表示的任意HTML內(nèi)容的特色。它有可選項(xiàng)用來設(shè)置分頁(yè)/滑動(dòng)速度，啟用/禁用自動(dòng)播放，顯示插入導(dǎo)航和其它。

43. S Gallery

S Gallery是另外一個(gè)在響應(yīng)式方格展示圖片的jQuery圖片畫冊(cè)插件。其靈感來源于Sony的產(chǎn)品頁(yè)面畫冊(cè) (使用Flash制作) ，并完整模仿了它。一當(dāng)一個(gè)圖片項(xiàng)被點(diǎn)擊和獲得焦點(diǎn)，就可以使用向前-向后按鈕或者通過鍵盤瀏覽其他的圖片項(xiàng)。

44. Pop Easy

PopEasy是一個(gè)輕量級(jí)jQuery插件，對(duì)于一個(gè)開發(fā)人員簡(jiǎn)單創(chuàng)建模態(tài)窗口是必須的。通過在你的頁(yè)面應(yīng)用一個(gè)遮罩并打開一個(gè)可定制的彈出模態(tài)窗口，把焦點(diǎn)放在重要的元素上。

45. Scroll Up

ScrollUp是一個(gè)輕量級(jí)的jQuery插件，用來創(chuàng)建自定義的“滑動(dòng)到頂部”功能，可以簡(jiǎn)單地用到任何網(wǎng)站。通過指定一個(gè)有效的CSS顏色到activeOverlay設(shè)置，創(chuàng)建一個(gè)可視線來幫助確定距離頂部的理想滑動(dòng)距離。

46. Mobiscroll

Mobiscroll是一個(gè)用在觸屏設(shè)備（Android手機(jī)，iPhone，iPad，Galaxy Tab）上的輪滑跑馬燈，或者日期時(shí)間拾取器的jQuery插件?？刂破髂茌p松地進(jìn)行定制以支持任意自定義值，并且甚至直接作為原生的選擇控制器（下拉列表）的一種替代方案使用?？刂破魇强梢灾黝}化的。在CSS里你能輕易改變外觀。它也支持預(yù)定義，好看的顏色模式。已在iOS4，Android 2.2，Android 2.3，Chrome，Safari，F(xiàn)irefox，IE9上測(cè)試過。

47.Cycle2

Cycle，是過去的一個(gè)非常受歡迎的jQuery幻燈片播放插件，現(xiàn)在有了一個(gè)增強(qiáng)的版本：Cycle2.該插件對(duì)于那些期待創(chuàng)建完全個(gè)性化的幻燈片展示效果的人是非常完美的，因?yàn)樗鼪]有聲明任何標(biāo)記或樣式。并且，它的功能非常靈活。Cycle2支持反應(yīng)靈敏的布局，幾乎包含應(yīng)對(duì)所有的選項(xiàng)（全局或者單張幻燈片），通過使用全部特性的API，還可以非常輕松的進(jìn)行擴(kuò)展。

48.Tooltipster

Tooltipster 是一個(gè) jQuery 插件，用于快速創(chuàng)建 HTML5 驗(yàn)證和靈活的工具提示。該插件屬于“麻雀雖小，五臟俱全”的類型，壓縮后僅4.8kb，但是工作起來非常快，并且可以輕松的定制。它的外觀可以用 CSS （主題支持） 和箭頭進(jìn)行修改，跟隨鼠標(biāo)的位置改變，延遲等外觀特效都可以被定義。

49.FitText

FitText是一個(gè)非常簡(jiǎn)單但是卻功能強(qiáng)大的jQuery插件，可用來確保文本能夠適應(yīng)已定義好的元素。它根據(jù)元素環(huán)繞它的寬度自動(dòng)更新字體大小，并保證布局不會(huì)太零碎（因?yàn)樽煮w大?。?，即使頁(yè)面是在桌面瀏覽器或者移動(dòng)端中顯示。還有，該插件提供了一些選項(xiàng)微調(diào)，包括設(shè)置"水平縮放"的能力和尺寸的最小到最大。

50. Unslider

Unslider是且僅僅是用于圖片展示的jQuery滑塊插件。沒有華麗的特效和多余的裝飾，該插件小于3kb。它是流暢、靈活，并且令人難以置信的小。Unslider已經(jīng)在目前所有的瀏覽器最新版本中進(jìn)行了測(cè)試，再不是那么新的瀏覽器中，只能看到它“落寞的輝煌”。如果你需要，你可以添加鍵盤方向鍵支持。不是所有的滑塊插件生來平等，Unslider深知這一點(diǎn)。（譯者：作者在賣萌么？）

最新評(píng)論