常用的插件整理一下，免得每次都花时间重新找~

GitHub上面的文章在这里哟~

---

目录

• Layout
• 动画库

  • - Hover动画

  • - 滚动展示动画

  • - 文本动画

  • - 其他

• 滚动库
• 纯CSS背景
  • - 全屏滚动
• 轮播
• 弹出框
  • - 消息通知
  • - Alert
  • - Popper
• 表单处理
  • - 数据加密
  • - 表单验证
  • - 日期处理
  • - 按钮
  • - Select
    • -- 下拉选择
    • -- 级联选择器
    • -- 颜色选择
    • -- 时间选择
• AJAX
  • - jsonp
• 分页
• 富文本
  • - Markdown
• 树形结构
• 定位
• 图片
  • - 预加载
  • - 懒加载
  • - 瀑布流
  • - 相册
  • - 主题色提取
  • - 占位
  • - 滤镜
• 导航
• 唤醒APP
• 视频
  • - 带弹幕
• 复制粘贴
• 条码
  • - 条形码
  • - 二维码
• 拖拽
• [移动端触摸事件](#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%A7%A6%E6%91%B8%E4%BA%8B%E4%BB %B6)
• 文件上传
• 代码
  • - 代码高亮
  • - 代码分享
• 前端国际化
• 地图
• 即时通讯
• 数据可视化
• PDF阅读
• 前端存储
• 数据模拟
• 分享
• 评论
  • 代码截图分享
• 计算
• 引导
• Flutter
• 字体&图标
• 项目流程
• 人脸识别
• 其他
• polyfill
• Gulp
• Eslint
• 组件库
  • React
  • 小程序
• VUE
  • 插件
  • 组件库
• Chrome插件

Layout

kitecss

• 兼容IE8+的flex替代方案

动画库

Animate.css

• CSS3 动画库，也是目前最通用的动画库。

Anime.js

• 一个强大的、轻量级的用来制作动画的javascript库

GreenSock

• Tween，Timeline
• 时间线控制动画流程

Magic.css

• css3 animation动画库

Bounce.js

• 回弹动画

Waves

• 仿移动端按钮点击波纹效果

Move.js

• 一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。

Velocity.js

• 一个功能齐全的 JavaScript 动画套件 ,$.animate()增强版

bindingx

• 在移动端（app）使复杂交互操作以60fps的帧率流畅执行的解决方案
• 水波纹，header的收放等
• 适用于weex，rn。貌似vue也可以。

- Hover动画

hover3d

• 3d悬停效果

Hover.css

• CSS hover 悬停效果，可以应用于链接、按钮、图片等等。

HoverEffectIdeas

• 纯CSS图片hover，有很多种搭配好的效果，直接添加样式就ok

hover-effect

• Three.js 和 TweenMax.js 配合使用的敲级酷炫的图片悬停效果

direction-reveal

• 根据鼠标进入位置，展现从不同方向 展现 hover 效果
• 支持很多种效果，基本上包含了日常所有的情况

- 滚动展示动画

laxxx

• 滚动特效库，推荐使用
• 压缩完只有 2kb，很轻量

Wow.js

• 滚动展示动画

ScrollReveal.js

• 滚动展示动画

Aos.js

• 滚动展示动画

Skrollr.js

• 滚动展示动画，动画会逐帧执行，适合做背景视差滚动、

Crossfade.js

• 当页面往下滚动的时候，crossfade.js 会让图片渐渐的模糊，就像是将要淡出的感觉；当页面往上滚动的时候，图片又会变的清晰。

- 文本动画

textillate

• 文本逐字动画

- 其他

StackBlur.js

• 图片高斯模糊

NumberFlip

• 数字老虎机滚动

SVG-Loaders

• svg制作的loading图标

滚动库

Iscroll.js

• 平滑滚动插件

BetterScroll

• Iscroll优化版，移动端滑动体验更加流畅

Mescroll.js

• 精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器

JqueryScrollbox

• 图片文字滚动插件

Limarquee

• 基于 jQuery 的无缝滚动插件，类似于 HTML 的 marquee 标签，但比 marquee 更强大。 它可以应用于任何 Web 元素 。

Animatescroll.js

• 页面滚动到指定位置

MalihuCustomScrollbarPlugin

• jQ滚动条样式美化

纯CSS背景

css3patterns

• CSS一姐 LeaVerou 用纯CSS写的一套背景图案

- 全屏滚动

fullPage

• 全屏网站制作

轮播

Swiper

• 最常用的，各端都适用

iSlider

• iSlider是一个表现出众，轻量且高性能，无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景，提供多种切换动画效果，展示多种类型的场景。

Smoothslides

• 幻灯片内的图片可移动，并且可设置移动的方向（左/右/左上/右下等等），使幻灯片更加特别、有趣。

OwlCarousel2

• 支持拖动和滚轮的jQuery响应轮播，一般用在局部轮播

弹出框

layer

• layui独立维护的web弹层组件，包含modal、toast等各种功能弹窗

Bootstrap

• Bootstrap3的插件，包含modal、toast、tooltips

IZI

• 最好看的基于jQuery的弹出框，不绷
• iziModal、iziToast

- 消息通知

notyf

• 右下角出现

• 基于jQuery，支持成功（confirm）和失败（alert）两种主题，仅限文本信息

pnotify

• 右下角出现

• 基于jQuery，支持多种主题，多种内容（文字、图片、富文本）

overhang.js

• 顶部出现
• 基于jQuery，支持多种主题，文字和表单

- Alert

sweetalert

• 好看好用

- Popper

popper-core

• 只有3kb

表单处理

- 数据加密

jsencrypt

• OpenSSL生成的实际私钥对和公钥对

- 表单验证

validator.js

• 不依赖jQuery，适用于移动端

jquery-validation

• 基于jQuery，功能齐全

validform

• 国产精品，基于jQuery

- 日期处理

moment

• Moment.js 是一个解析，验证，操作和显示日期和时间的 JavaScript 类库

dayjs

• 2KB，中文文档

- 按钮

bttn.css

• 按钮样式库

- Select

-- 下拉选择

select2

• 全场最佳

-- 级联选择器

ustbhuangyi/picker

• 移动端最好用的的筛选器组件，高仿 ios 的 UIPickerView ，非常流畅的体验。

distpicker

• 省市区三级联动

-- 颜色选择

bootstrap-colorpicker

• Bootstrap 4的组件

-- 时间选择

laydate

• layui的时间选择组件

AJAX

axios

• 使用promise语法的 ajax 封装

- jsonp

jsonp

• 简单的jsonp实现

jsonp-sandbox

• 可以安全加载（防xss）jsonp的运行沙盒

分页

paginationjs

• 基于jQuery

富文本

wangEditor

• 轻量化的富文本编辑器，IE10+

ueditor

• 百度UED的富文本编辑器，功能完善，可定制

ckeditor5

• ckeditor5.0版本，好看

medium-editor

• 专注文本编辑，只有文本编辑

slate

• UI好看，高度定制

- Markdown

editor.md

• 开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

树形结构

zTree_v3

• 基于jQuery的多功能树形结构插件

定位

tether

• 增强绝对定位的功能
• 自带选择框、下拉框、工具提示

图片

- 预加载

PreloadJS

• CreateJs 的 预加载模块

- 懒加载

jquery_lazyload

• 基于jQuery的懒加载

LazyImage

• 个人制作的方法，即开即用

- 瀑布流

masonry

• 比较好的一个库，中文说明

- 相册

fancybox

• 基于jQuery

viewerjs

• PC端，不基于jQuery

PhotoSwipe

• 移动端

- 主题色提取

rgbaster.js

• 不基于jQuery

color-thief

• 高赞，名字骚

- 占位

holder

• 图片占位符插件

- 滤镜

CSSgram

• CSS混合模式实现的Instagram的26种滤镜

- Editor

tui.image-editor

• 图片编辑器

image-cropper

• 图片裁剪，一般用来裁剪头像

Canvas

fabric.js

• 基于canvas的自由创作库
• 提供简单的api

spritejs

• 基于canvas的高性能图形系统， 支持 web、node、桌面应用和小程序的图形绘制和实现各种动画效果
• 360团队开发

导航

okayNav

• 最OK的响应式导航菜单，不基于jQuery

唤醒APP

callapp-lib

• 大多数情况下能唤醒大多数APP

视频

chimee

• 支持 mp4、flv 等多种格式，由奇舞团视频云前端组研发

flv.js

• Bilibili开源纯JavaScript编写的Flash视频播放器

多青

• 视频存储平台，直接加入代码中插入视频

- 带弹幕

DanmuPlayer

• Danmmu Player是一个轻量级具备弹幕功能的Html5视频播放器，仅63KB大小

jquery.danmu.js

• 基于jQuery的弹幕效果插件，可以运用在网页的任何位置，不局限视频

复制粘贴

clipboard.js

• 仅有3kb

条码

- 条形码

JsBarcode

• 条形码生成，可以爱浏览器和Node运行

- 二维码

jquery-qrcode

• 基于jQuery的二维码生成插件

拖拽

draggabilly

• 支持IE10+ 和触摸设备。

dragula

• 拖动容器插件，类似于穿梭框，中文说明

移动端触摸事件

hammer.js

• 移动端触摸手势检测，中文说明

fastclick

• 消除移动端点击300ms延迟

文件上传

webuploader

• 简单的以HTML5为主，FLASH为辅的现代文件上传组件,兼容性好

filepond

• 好看就完了

代码

- 代码高亮

highlight.js

• 在HTML中展示代码

- 代码分享

carbon

• 代码分享图片美化

前端国际化

i18next

• 前端国际化就是网站语言的切换
• 实现例子1，实现例子2

vue-i18n

• i18n的Vue实现

地图

百度地图

高德地图

腾讯地图

谷歌地图

即时通讯

layim

• LayIM 是基于 layui 的一款独立的付费组件，它是网页即时通讯（WebIM） UI 解决方案，包含丰富的前端接口，您购买授权后得到的是一套前端源代码，而后端程序需自写。

闲聊么

• 聊天室

数据可视化

echarts

• 百度出品，文档有点超啊

antv

• 蚂蚁金服出品，图表参数稍微好配置一点

SandDance

• 微软出品
• 图表类型很少，强在3d效果

roughViz

• 手绘风图表
• 支持 Vue 和 React

PDF阅读

pdf.js

• P一其随

前端存储

storage

• 封装了sessionStorage和localStorage

store.js

• 封装了localstorage，提供强大的API

localForage

• 离线存储的改进，包含IndexDB、LocalStorage

数据模拟

easy-mock

Mock

yapi

• 鑫神推荐

分享

bshare

• jiaThis下线，首选

share.js

• 好看

评论

gitalk

• 基于 GitHub Issue 和 Preact 开发的评论插件。
• GitHub账号登录

畅言

• 定制化
• 自带过滤

来必力

• 无需注册,使用已有社交账号便可方便快捷地登录。

代码截图分享

carbon

• 创建漂亮的代码分享图片

计算

number-precision

• 超小体积
• 完美支持浮点数的加减乘除、四舍五入等运算。

引导

tourist

• Bootstrap风格

Flutter

flutter-go

• flutter 开发者帮助 APP，包含 flutter 常用 140+ 组件的demo 演示与中文文档
• 阿里出品

字体&图标

fontmin

• 网易出品，中文生成字体文件
• 桌面应用

simple-icons

• 流行品牌的svg图标

项目流程

elf

• 京东，h5项目快速构建

parcel

• 轻量级打包工具

人脸识别

face-api

• 浏览器运行的人脸识别库
• 封装 tensortflow.js人脸识别核心库

js工具

javascript-obfuscator

• js代码混淆工具

lodash

• 非常实用的工具库
• 内部封装了字符串、数组、对象等常见数据类型的处理函数

jtools

• 封装常用的工具函数，如日期格式化、浏览器判断等

• 提高开发效率

jscodeshift

• 将 js 内容解析成 AST 语法树，并提供一些便利的操作接口，方便我们对各个节点进行更改
• 如果需要去做一些底层的高级处理，就能用上这个插件

其他

airbnb代码规范

• 爱彼迎js代码规范

pinyin

• 转换中文字符为拼音。可以用于汉字注音、排序、检索。

github-markdown-toc

• README.md目录生成
• 多种语言

eruda

• 专为手机网页前端设计的调试面板，类似 DevTools 的迷你版
• 捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。

shields

• readme徽章制作
• 样式有限制

polyfill

focus-visible

• css伪类:focus-visible polyfill

ieBetter

• H5新特性兼容ie6~8

classList.js

• H5 classlist属性增强

object-fit

• css object-fit 属性增强

compass-flexbox

• 所有浏览器更好的支持flexbox

FormData

• 解决formdata在 ie 10+ 的兼容

Gulp

use-gulp

• gulp 插件整理

purifycss

• 移除没使用到的 css

javascript-obfuscator

• js代码混淆工具

Eslint

eslint

• Eslint官方

eslint-plugin-vue

• Vue 官方规范

eslint-airbnb

• Airbnb 规范

组件库

Bootstrap

• 响应式

lulu-ui

• 兼容ie7/8
• 面向用户，阅文出品

Semantic-UI

• 响应式

amazeui

• 响应式，国产

Flat-UI

• pc

ant-design

• pc，移动端有ant-design-mobile

bulma

• 移动，推荐

weui

• 移动，微信组件

tailwindcss

• 样式与结构分离集大成
• postcss语法，可以配合sass使用

React

material-ui

• 最符合material-design

小程序

vant-weapp

• 有赞团队

iview-weapp

• 一套高质量的微信小程序 UI 组件库

minui

• 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化

wux-weapp

• 组件比较丰富，值得使用。

VUE

插件

vueg

• Vue转场

cssfx

• 常用按钮hover、文字effect、loading动画组件

handsontable

• Handsontable是用于Web应用程序的JavaScript数据网格组件。
• 支持所有的标准操作，增删改查以及过滤排序，可以按需定制。
• 可以导出为 csv 文件

sheetjs

• SheetJS是一个浏览器操作excel文件的JS库，支持每种Excel文件格式；
• 修改后能另存为 xlsx、xlsb、xls、ods、fods格式

vue-bigdata-table

• 基于Vue.js的百万级数据表格组件，支持编辑、筛选、过滤、粘贴、拖动调整列宽等多种功能
• 固定表头和列

Mini Music Player

• 国外友人写的一个Vue.js音乐播放器，好看的不得了

vue-interactive-paycard

• 炒鸡好看的卡片验证
• 银行卡

typed.js

• Typed是一个专注打字动画的库

Vue.Draggable

• 后台拖拽场景的完美方案

vue-virtual-scroller

• 性能不错的无限滚动方案

vuescroll

• 不错的PC端滚动美化

组件库

cube-ui

• 移动

element

• pc、管理系统

mint-ui

• 移动

iview

• pc、管理系统

muse-ui

• materia-ui风格
• pc、面向用户

vant

• 有赞团队

vux

• 移动端

vuetify

• pc

ant-design-vue

• pc
• ant-design

nutUI

• 移动端
• 京东团队

Chrome插件

ColorPick Eyedropper

• 网页拾色器

Window Resizer

• 调整浏览器窗口大小

Lightshot

• 截图

Dimensions

• 测距

Tampermonkey

• 油猴

Click&Clean

• 清理浏览器

JetBrains IDE Support

• webstorm网页调试
• 一般来搞实时刷新

LiveReload

• 实时刷新

Allow-Control-Allow-Origin: *

• 允许跨域

Vue.js devtools

• Vue调试

Essential SEO Toolkit (SEO Analysis Tool)

• 集合SEO调试，性能分析（yslow，PageSpeed）等

Full Page Screenshot

• 整站截图

GitHub Repository Size

• 显示GitHub每个文件的大小

GitHub Hovercard

• hover文件或作者的时候显示简介

Charset

• 改变当前页面编码

Octotree

• 在GitHub项目中展示结构

baiduyun

• 油猴脚本
• 直接下载百度网盘和百度网盘分享的文件,直链下载超级加速