2016年31款輕量高效的開源JavaScript外掛程式和庫

標籤：web項目   home   圖片預覽   project   file   ane   ace   控制項   3.3   

目前有很多網站設計師和開發人員喜歡使用由JavaScript開發的外掛程式和庫，但同時面臨一個苦惱的問題：它們中的大多數實在是太累贅而且常常降低網站的效能。其實，其中也有不少輕量級的外掛程式和庫，它們不僅輕巧有用，而且不會影響網站的效能。本文就為大家整理了2016年以來30多款輕量級Javascript外掛程式和庫的列表，這些工具服務於特定的目標，並且它們能夠非常有效和高效地實現目標。

不管你想建立一個圖片庫、一個滑動效果，個人化功能表還是其他介面元素，你都可以用這些外掛程式和庫輕易的實現。同時，你還可以使用這些外掛程式為網站增加出色的功能，例如GIF和圖片預覽、迷人的網站表徵圖及其他。

這些外掛程式和庫都是非常簡單的編碼並且可以輕易實現。你以後肯定會發現它們對於你的Web項目非常有用。

0、baguetteBox.js

baguetteBox.js是一個簡單易用的響應式映像燈箱效果指令碼，而且在行動裝置上支援滑動手勢，完全使用Javascript編寫。（壓縮後大約2.7KB）

DEMO：https://feimosi.github.io/baguetteBox.js/

1、ScrollReveal

ScrollReveal外掛程式使使用者能夠無比輕鬆地建立案頭和行動瀏覽器的網頁滾動動畫（壓縮後大約3.3KB）

請各位自行開啟DEMO頁面感受一下動畫效果。：）

DEMO：https://scrollrevealjs.org/

2、Marginotes

Marginotes，使用jQuery實現的添加旁註外掛程式，快速，炫酷。

DEMO：http://francisco.dance/

3、Loud Links

LoudLinks是一個輕量級的JavaScript庫用於添加互動聲音到您的網站。它通過建立HTML5音頻元素並用它來播放MP3或OGG音頻檔案來實現這個功能。（約1.5KB）

還是煩請各位開啟下面的連結感受一下效果。：）

DEMO：http://loudlinks.rocks/#examples

4、Bricks.js

Bricks.js，是一款超快的用於固定寬度元素的“磚石”布局產生器

可以在DEMO頁面輸入所需的磚塊個數，查看產生的效果（每次都會隨機變化）

DEMO：http://callmecavs.com/bricks.js/

5、MediumEditor

MediumEditor，使用了Vanilla Javascript架構。MediumEditor是一個輕量級的（28KB）仿Medium.com的所見即所得 (WYSIWYG)線上編輯器工具列。還有一個可用的MediumEditor擴充和主題。

DEMO：https://yabwe.github.io/medium-editor/

6、Philter

Philter可以讓你通過使用HTML 屬性控制CSS濾鏡，使用它之後，當你將游標移動到圖片上的時候，圖片上會載入CSS濾鏡。無論是作為jQuery外掛程式還是Vanilla Javascript架構都可用。

DEMO：http://specro.github.io/Philter/

7、SuperEmbed.js

SuperEmbed.js是一個Javascript庫，可檢測出網頁上的內嵌視頻並使他們能夠變成響應式元素（壓縮後約1.6KB）

DEMO：https://jsfiddle.net/h6x04LuL/

8、Substance

Substance是一個基於Web的內容編輯JavaScript庫。它給你提供所有你需要用於建立自訂編輯器和基於Web的發布系統的工具。

DEMO：http://substance.io/

9 List.js

List.js是一個輕量級的和快速的Vanilla JavaScript架構指令碼，為列表、表格或其他任何HTMLL標籤增加了搜尋，排序，過濾器和靈活性等元素

DEMO：http://www.listjs.com/

10、jqGifPreview

jqGifPreview是一個簡單的jQuery外掛程式，用於建立GIF預覽，就像你在Facebook上看到的。

DEMO：http://demo.sodhanalibrary.com/angular/gif_preview/jqGifPreview/demo.html

11、Datedropper.js

Datedropper.js是一個jQuery外掛程式，為您提供了一種簡單的方法用於在輸入地區輸入日期。

DEMO：http://felicegattuso.com/projects/datedropper/

12、jfMagnify

jfMagnify是一個jQuery外掛程式用於在任何HTML元素建立放大鏡效果，不僅僅是映像。

DEMO：https://github.com/fonstok/jfMagnify/tree/master/demo

13、jQuery formBuilder

jQuery formBuilder是一個新的jQuery外掛程式，可通過拖放的方式快速產生表格

DEMO：https://formbuilder.online/

14、Popper.js

Popper.js是一個輕量級的庫用於管理工具提示和彈窗效果。你可以快速輕易地使用一行代碼放置工具提示控制項。（壓縮後約4KB）

DEMO：https://popper.js.org/

15、Image Blur Plugin

Image Blur Plugin是一個輕量級的跨瀏覽器jQuery外掛程式，用於產生映像模糊效果

DEMO：https://msurguy.github.io/background-blur/

16、InlineTweet.js

InlineTweet.js，你可以通過它輕易地用網頁上的任何文字建立一個推特連結。你所需要做的是用data-inline-tweet將推特文字包裹到一個容器

可以點擊DEMO，體驗該外掛程式的效果

DEMO：http://ireade.github.io/inlinetweetjs/

17、iMissYou.js

iMissYou.js是個輕便小巧的jQuery外掛程式用於當使用者離開你的網頁時，改變網頁的標題和表徵圖

18、SweetAlert2

SweetAlert2是一個顏值很高而且可以自訂的警告快顯視窗外掛程式，可以代替Javascript的快顯視窗

DEMO：https://limonte.github.io/sweetalert2/

19、Turntable.js

Turntable.js是一個響應式的jQuery滑塊外掛程式，會在當你的滑鼠(或手指)掃過一個存放了一批圖片的容器時產生翻轉效果

DEMO：http://polarnotion.github.io/turntable/

20、Push.js

Push.js是一個跨瀏覽器的Javascript案頭通知外掛程式

DEMO：http://nickersoft.github.io/push.js/

21、Bideo.js

Bideo.js是一個Javascript庫，能非常輕易添加全屏背景視頻到網頁

DEMO：https://rishabhp.github.io/bideo.js/

22、Microlight.js

Microlight.js是一個輕量級的代碼高亮庫，適用於任何程式設計語言，這大大提高了代碼可讀性（約2.2KB）

DEMO：https://asvd.github.io/microlight/

23、Algolia Places

Algolia Places是一個Javascript庫，能讓你在網頁輕易實現搜尋欄自動完成功能

DEMO：https://community.algolia.com/places/

24、flatpickr

flatpickr基於vanilla Javascript架構，是一個輕量級的日期標記和日曆外掛程式

DEMO：https://chmln.github.io/flatpickr/

25、Slidebars

Slidebars是一個jQuery架構，用於為你的網頁或web應用添加off-canvas菜單和側邊欄

DEMO：https://www.adchsm.com/slidebars/

26、anime.js

anime.js是一個靈活輕便的JavaScript動畫庫。它通過CSS，獨立變換，SVG，DOM屬性和JS對象實現。這個GIF沒有表現出它真正的效果，大家可以訪問首頁看一下，動畫相當酷炫。

DEMO：http://codepen.io/collection/XLebem/

27、Cleave.js

Cleave.js會在你輸入時格式化你的標籤裡面的內容

DEMO：http://nosir.github.io/cleave.js/

28、Skippr

Skippr是一個超級簡單的jQuery輕量級投影片外掛程式

DEMO：http://austenpayan.github.io/skippr/

29、iziModal.js

iziModal.js是一個優雅的，響應式的，靈活和輕便的jQuery外掛程式。

DEMO：http://izimodal.marcelodolce.com/

30、Lightgallery.js

Lightgallery.js是一個功能齊全的JavaScript映像燈箱外掛程式，沒有任何依賴。

DEMO：https://sachinchoolur.github.io/lightgallery.js/

&& https://codepen.io/sachinchoolur/pen/qNyvGW

2016年31款輕量高效的開源JavaScript外掛程式和庫