值得H5前端學習的60個JS插件(含DEMO演示)

下面也能夠說是H5前端學習的js插件大全。基本包含了大部分的前端最前沿的js插件和庫。

佈局

SuperEmbed.js- 是一個Javascript庫，可檢測出網頁上的內嵌視頻並使他們可以變成響應式元素。demo

ScrollReveal- ScrollReveal插件使用戶可以無比輕鬆地建立桌面和移動瀏覽器的網頁滾動動畫。demo

Bricks.js- 是一款超快的用於固定寬度元素的「磚石」佈局生成器。demo

——————————————————————————————————————————————

 

圖片預覽

baguetteBox.js- 是一個簡單易用的響應式圖像燈箱效果腳本。demo

Lightgallery.js- 是一個功能齊全的JavaScript圖像燈箱插件。demo

viewerjs- 是一個圖像預覽插件。demo

cropperjs- 是一個圖片編輯器插件。demo

photo-editor- 是一個本地圖片編輯器插件。demo

blazy.js- 是一個懶惰加載插件。demo

 

——————————————————————————————————————————————

動畫

anime.js- 是一個靈活輕便的JavaScript動畫庫。demo

three.js- 是一個JS 3D庫。demo

vivus- JavaScript庫，使SVG繪製動畫。demo

 

——————————————————————————————————————————————

 

輪播圖

Swipe- 準確的觸摸滑塊。demo

SuperSlide jQuery圖片滾動,jQuery無縫滾動demo

 

——————————————————————————————————————————————

 

彈出層

Popper.js- 是一個輕量級的庫用於管理工具提示和彈窗效果。demo

SweetAlert2- 是一個顏值很高並且能夠自定義的警告彈出窗口插件，能夠代替Javascript的彈出窗口。demo

artDialog- 是一個經典、優雅的網頁對話框控件。demo

layer- 是一個web彈層組件。demo

 

——————————————————————————————————————————————

 

音頻視頻

Loud Links- 是一個輕量級的JavaScript庫用於添加交互聲音到您的站點。demo

flv.js- B 站 HTML5 播放器內核開源。

 

——————————————————————————————————————————————

 

編輯器

MediumEditor- 仿Medium.com的所見即所得在線編輯器工具欄。demo

Substance- 是一個基於Web的內容自定義編輯器。demo

flatpickr- 是一個輕量級的代碼高亮庫，適用於任何編程語言。demo

pen- 是一個Markdown編輯器工具。demo

aceAce（Ajax.org Cloud9 Editor）。demo

CodeMirror瀏覽器端的代碼編輯器。demo

esprima用於綜合分析的 ECMAScript 解析器。demo

quill一個帶有 API 的跨瀏覽器富文本編輯器。(demo)

ckeditor-releases適用於每一個人的 web 文本編輯器。demo

editor一個 markdown 編輯器，但仍在開發中。demo

EpicEditor一個可嵌入的 js Markdown的編輯器，擁有全屏編輯、即時預覽、自動保存草稿和離線支持等功能。demo

jsoneditor查看、編輯和格式化 JSON 的 web 工具。demo

vim.js擁有持久化 ~/.vimrc 的 Vim 編輯器的 JavaScript 移植版本。demo

SquireHTML5 富文本編輯器。demo

TinyMCEJavaScript 富文本編輯器。demo

trix由 Basecamp 製做，適用於天天寫做的富文本編輯器。demo

 

——————————————————————————————————————————————

 

 

存儲

store.js- 本地存儲localstorage的封裝，提供簡單的API。demo

cookie.js- 對操做cookie的封裝，提供簡單的AIP 兼容IE6。demo

 

——————————————————————————————————————————————

 

表單

validator.js- 輕量級的JavaScript表單驗證，字符串驗證。demo

List.js- 是一個輕量級的爲列表、表格或其餘任何HTMLL標籤增長了搜索，排序，過濾器和靈活性等元素。demo

Algolia Places- 是一個能讓你在網頁輕易實現搜索欄自動完成功能。demo

Cleave.js- 是一個會在你輸入時格式化你的標籤裏面的內容。demo

validator.js- 是一個簡單、輕量級，但功能強大的 Validator 組件。demo

 

——————————————————————————————————————————————

 

時間

moment- 是一個日期處理類庫,用於解析、檢驗、操做、以及顯示日期。demo

timesheet.js- 是一個時間展現片斷插件。demo

date.js- 是一個格式化時間、過去時間展現、解決因時區變動插件。

timeago.js- 格式化時間顯示多久之前的插件。demo

 

——————————————————————————————————————————————

 

其它

hotkeys- 是一個強健的 Javascript 庫用於捕獲鍵盤輸入和輸入的組合鍵。demo

clipboard.js- 現代複製到剪貼板。沒有Flash，gzip壓縮只有3KB 。demo

translater.js- 這是一個利用HTML註釋的頁面翻譯解決方案。demo

Push.js- 是一個跨瀏覽器的Javascript桌面通知插件。demo

onlinenetwork- js判斷是否斷網了。

iNotify- 是一個實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、等系統通知。demo

tesseract.js- 是一個文字識別轉換，能夠運行在瀏覽器和服務器NodeJS上。demo

原文地址：https://www.jianshu.com/p/3e05314da075