前端經常使用插件、工具類庫

 

函數庫

Lodash（推薦）：github.com/lodash/loda…

Underscore：underscorejs.org/

Ramda：github.com/ramda/ramda

outils：github.com/proYang/out…

30-seconds-of-code：github.com/Chalarangel…

動畫庫

Animate.css

• CSS3 動畫庫，也是目前最通用的動畫庫。
• daneden.github.io/animate.css…

Anime.js：

• 一個強大的、輕量級的用來製做動畫的javascript庫
• animejs.com/

Hover.css：

• CSS hover 懸停效果，能夠應用於連接、按鈕、圖片等等。
• github.com/IanLunn/Hov…

wow.js:

• 滾動展現動畫
• WOW.js 依賴 animate.css，因此它支持 animate.css 多達 60 多種的動畫效果。
• github.com/matthieua/W…

scrollReveal.js：

• 相似 wow.js
• github.com/jlmakes/scr…

Magic.css：

• css3 animation動畫庫
• github.com/miniMAC/mag…

Waves：

• 點擊波紋效果
• github.com/fians/Waves

move.js：

• 一個小型的JavaScript庫，經過JS來控制一系列的CSS動畫順序執行，使CSS3動畫變得很是簡單和優雅。
• github.com/visionmedia…

Velocity.js：

• 一個功能齊全的 JavaScript 動畫套件，包括諸如淡入淡出、滾動、滾動、中止、結束、翻轉等動畫效果。
• github.com/julianshapi…

滾動庫

iscroll - 平滑滾動插件：github.com/cubiq/iscro…

BetterScroll：

• github.com/ustbhuangyi…
• iscroll 的優化版，使移動端滑動體驗更加流暢

mescroll：

• 移動端上拉刷新下拉加載
• www.mescroll.com/api.html

animatescroll：

• jQuery滾動到指定位置
• plugins.compzets.com/animatescro…

crossfade.js：

• jQuery圖片模糊插件crossfade.js
• www.dowebok.com/104.html

jQuery Scrollbox：

• 圖片文字滾動插件
• www.jq22.com/jquery-info…

liMarquee：

• jQuery無縫滾動插件
• www.dowebok.com/188.html

輪播圖

Swiper：

• 經常使用於移動端網站的內容觸摸滑動
• www.swiper.com.cn/

iSlider：

• 移動端滑動組件
• eux.baidu.com/iSlider/dem…

slip.js：

• 移動端跟隨手指滑動組件，零依賴。
• github.com/binnng/slip…

OwlCarousel2：owlcarousel2.github.io/OwlCarousel…

slick：www.jq22.com/jquery-info…

myFocus：www.cosmissy.com/myfocus/tut…

WebSlides：github.com/webslides/w…

jQuery輪播插件slider：www.jq22.com/jquery-info…

滾屏

fullpage：www.jq22.com/jquery-info…

彈出框

layer：

• layer.layui.com/
• layui 獨立維護的三大組件之一（layDate、layer、layim）
• 儘管 layui 中包含了這些組件，但由於它們受衆羣體普遍或應用普遍，特從 layui 中抽取出來個副本，可獨立引用。咱們也會對它們進行同步維護。

Bootbox.js：bootboxjs.com/

dialogBox：

• 基於 jQuery
• www.jq22.com/jquery-info…

easyDialog：www.h-ui.net/easydialog-…

消息通知

Notyf：

• 簡單的響應式純js消息通知插件
• www.htmleaf.com/jQuery/Ligh…

PNotify：

• 頁面右上角的提示信息（非彈框提示）
• sciactive.com/pnotify/
• sciactive.github.io/pnotify/
• github.com/sciactive/p…

overhang.js：

• www.jq22.com/jquery-info…
• overhang.js 是一個JQuery插件顯示即時通知、 確認或給定元素中的提示。

下拉框

select2：select2.org/

級聯選擇器

ustbhuangyi/picker

• github.com/ustbhuangyi…
• 移動端最好用的的篩選器組件、聯動篩選

jQueryDistpicker：

• fengyuanchen.github.io/distpicker/
• www.jq22.com/demo/jQuery…

顏色選擇器

Bootstrap Colorpicker 2：github.com/farbelous/b…

時間選擇器

layDate：www.layui.com/laydate/

wdatepicker

時間日期處理

Moment.js：

• Moment.js 是一個解析，驗證，操做和顯示日期和時間的 JavaScript 類庫。
• momentjs.com
• github.com/moment/mome…

timeago.js：

• 輕量級的時間轉換 Javascript 庫
• github.com/hustcc/time…

表單驗證

validator.js：github.com/chriso/vali…

jQuery Validation

• jQuery 表單校驗
• github.com/jquery-vali…

Validation Plugin：

• jQuery插件
• www.imooc.com/learn/385

Validform：

• 一行代碼搞定整站的表單驗證！- Jquery表單驗證插件
• validform.rjboy.cn/

分頁插件

pagination：github.com/superRaytin…

富文本編輯器

wangEditor：www.wangeditor.com/

百度UEditor：ueditor.baidu.com/website/

CKEditor：ckeditor.com/

KindEditor：kindeditor.net/demo.php

MediumEditor：yabwe.github.io/medium-edit…

Simditor：simditor.tower.im/

Summernote：summernote.org/

Quill：quilljs.com/

Slate：github.com/ianstormtay…

Markdown 編輯器

Editor.md：pandao.github.io/editor.md/

樹插件

www.treejs.cn

圖片懶加載

lazyload：github.com/tuupola/jqu…

瀑布流

Masonry：www.cnblogs.com/cjc917/p/74…

Metro風兼瀑布流佈局效果http://www.lanrenzhijia.com/jquery/1985.html

相冊（圖片滑動切換展現效果）

PC端：Viewer.js：fengyuanchen.github.io/viewerjs/

PC端：photoviewer

移動端：PhotoSwipe：www.helloweba.net/javascript/…

導航插件

okayNav：www.dowebok.com/204.html

視頻播放器

Chimee

• 組件化H5播放器框架
• chimee.org/
• juejin.im/entry/5a02b…

flv.js

• Bilibili開源純JavaScript編寫的FLV播放器
• Flash 視頻（FLV）播放器
• github.com/Bilibili/fl…
• www.toutiao.com/a6478550535…

ckplayer：www.ckplayer.com/

jplayer：www.jplayer.cn/

html5player：juejin.im/post/596f53…

Video.js

• 開源、免費的HTML5和Flash視頻播放器
• Video.js - 開源、免費的HTML5和Flash視頻播放器

多青：dogeek.net/

彈幕視頻播放器

DanmuPlayer - Html5彈幕視頻播放器插件：github.com/chiruom/Dan…

jquery.danmu.js - jQuery彈幕插件：github.com/chiruom/jqu…

scroxt - 字幕字體滾動插件：github.com/chenjianfan…

複製粘貼插件

clipboard.js：github.com/zenorocha/c…

ZeroClipboard：github.com/zeroclipboa…

條形碼插件

barcode

二維碼插件

jquery.qrcode.js：github.com/jeromeetien…

拖拽

Draggabilly：www.jq22.com/jquery-info…

dragula：www.toutiao.com/a6491847196…

手機端事件

touch.js

文件上傳

uploader

WebUploader：

• github.com/fex-team/we…
• HTML5 & FLASH 文件上傳

代碼高亮

hightlight：highlightjs.org/

前端國際化 i18n

i18next：github.com/i18next/i18…

vue-i18n：github.com/kazupon/vue…

前端系列——jquery.i18n.properties前端國際化解決方案「填坑日記」：www.cnblogs.com/landeanfen/…

基於jQuery.i18n.properties 實現前端頁面的資源國際化：m.blog.csdn.net/aixiaoyang1…

地圖

百度地圖：lbsyun.baidu.com/

谷歌地圖：www.runoob.com/googleapi/g…

高德地圖：lbs.amap.com/

騰訊地圖：lbs.qq.com/

網頁即時通信

LayIM：layim.layui.com/

閒聊麼：www.xianliao.me/

數據可視化

ECharts ：echarts.baidu.com/index.html

阿里雲 DataV

PDF 閱讀器

github.com/mozilla/pdf…

主題色提取

RGBaster：github.com/briangonzal…

Color Thief

vibrant.js

前端存儲

ustbhuangyi/storage：

• 封裝了sessionStorage和localStorage
• github.com/ustbhuangyi…

store.js

• 本地存儲localstorage的封裝
• github.com/jaywcjlove/…

localForage：github.com/localForage…

數據 Mock

Easy Mock：github.com/easy-mock/e…

Mockjs：

• mockjs.com
• 生成任意隨機數據，攔截 Ajax 請求

 

 

json-server + fakerjs：github.com/typicode/js…

分享

bShare

JiaThis（關閉了！！！）

QQ分享組件

百度分享

評論

Gitalk

gitment

暢言

來必力

友言（關閉了！！！）

網易雲跟貼（關閉了！！！）

其餘

IE瀏覽器版本太低提示插件IEalert.js：www.jqueryfuns.com/resource/45…

lyric-parser - QQ音樂歌詞解析：github.com/ustbhuangyi…

holder.js - 圖片佔位符插件：github.com/imsky/holde…

jQuery放大鏡插件jqzoom.js：www.jq22.com/jquery-info…

Zooming – JavaScript圖片縮放庫：www.dowebok.com/223.html

fastclick - 消除 click 移動瀏覽器300ms延遲：github.com/ftlabs/fast…

jsonp - 一個簡單的JSONP實現：github.com/webmodules/…

js-base64 - Base64 編碼解碼：github.com/dankogai/js…

新手引導：github.com/easelinc/to…