前端常用插件工具类库汇总

1、函数库

  • Lodash : https://github.com/lodash/lodash
  • Underscore : https://underscorejs.net/
  • Ramda :https://ramda.cn/
  • outils :https://gitee.com/bigzhang111/outils
  • 30-seconds-of-code :https://github.com/Chalarangelo/30-seconds-of-code

2、动画库

2.1、Animate.css
  • CSS3 动画库,也是目前最通用的动画库。
  • https:/ldaneden.github.io/animate.css/
2.2、Anime.js
  • 一个强大的、轻量级的用来制作动画的javascript库。
  • http://animejs.com/
2.3、Hover.css
  • CSS hover 悬停效果,可以应用于链接、按钮、图片等等。
  • https://github.com/lanLunn/Hover
2.4、WOW.iS
  • 滚动展示动画。
  • woWjs 依赖 animate.css,所以它支持animate.css 多达60 多种的动画效果。
  • https://github.com/matthieua/WOW
2.5、scrollReveal.js
  • 类似 wow.is。
  • https://github.com/jlmakes/scrollreveal
2.6、Magic.css
  • css3 animation动画库。
  • https://github.com/miniMAC/magic
2.7、Waves
  • 点击波纹效果。
  • https://github.com/fians/Waves
2.8、move.is
  • 一个小型的JavaScript库,通过JS来控制。
  • 一系列的CSS动画顺序执行,使CSS3动画变得非常简单和优雅。
  • https://github.com/visionmedia/move.is
2.9、Velocity.js
  • 个功能齐全的JavaScript 动画套件,包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。
  • httos://github.com/julianshapiro/velocity

3、滚动库

3.1、iscroll
  • 平滑滚动插件。
  • https://github.com/cubigliscroll
3.2、BetterScroll
  • https://github.com/ustbhuangyi/better-scroll
  • iiscroll的优化版,使移动端滑动体验更加流畅。
3.3、mescroll
  • 移动端上拉刷新下拉加载。
  • http://www.mescroll.com/api.html
3.4、animatescroll
  • jQuery滚动到指定位置。
  • https://plugins.compzets.com/animatescroll/
3.5、crossfade.js
  • jQuery图片模糊插件 crossfade.js。
  • http://www.dowebok.com/104.html
3.6、jQuery Scrollbox
  • 图片文字滚动插件。
  • http://www.jg22.com/iguery-info1890
3.7、liMarquee
  • jQuery 无缝滚动插件。
  • http://www.dowebok.com/188.html

4、轮播图

4.1、Swiper
  • 常用于移动端网站的内容触摸滑动。
  • httos://www.swiper.com.cn/
4.2、iSlider
  • 移动端滑动组件。
  • http://eux.baidu.com/iSlider/demo/index_chinese.html
4.3、slip.js
  • 移动端跟随手指滑动组件,零依赖。
  • https://github.com/binnng/slip.js
4.4、OwlCarousel2
  • http://owlcarousel2.github.io/Ow|Carousel2/
  • slick: http://www.jg22.com/iquery-info406
  • myFocus:http://www.cosmissy.com/myfocus/tutorials.html
  • WebSlides:https://github.com/webslides/webslides/
  • jQuery 轮播插件slider: http://www.ia22.com/jquery-info889

5、滚屏

  • fullpage:http://www.jg22.com/jquery-info1124
    弹出框
    layer:
    • http://layer.layui.com/
    • layui 独立维护的三大组件之一(layDate, layer, layim)。
    • 尽管 layui中包含了这些组件,但因为它们受众群体广泛或应用广泛,特从layui中抽取出来个副本,可独立引用。我们也会对它们进行同步维护。
  • Bootbox.js:http://bootboxjs.com/
    dialogBox:
    • 基于 jQuery。
    • http://www.jg22.com/jquery-info4822
  • easyDialog:http://www.h-ui.net/easydialog-v2.0/index.html

6、消息通知

Notyf

  • 简单的响应式纯jis消息通知插件。
  • http://www.htmleaf.com/Query/Lightbox-Dialog/201609123990.html
    PNotify
  • 页面右上角的提示信息(非弹框提示)
  • https://sciactive.com/pnotify/
  • http://sciactive.github.io/pnotify/
  • https://github.com/sciactive/pnotify
    overhang.js
  • http://www.jg22.com/query-info9193
  • overhangjs是一个JQuery插件显示即时通知、 确认或给定元素中的提示。
    下拉框
    select2: https://select2.org/

7、选择器

ustbhuangyi/picker

  • https://github.com/ustbhuangyi/picker
  • 移动端最好用的的筛选器组件、联动筛选。
    jQueryDistpicker
  • http://fengyuanchen.github.io/distpicker/
  • http://www.jq22.com/demo/jQueryDistpicker20160621/
    颜色选择器
    Bootstrap Colorpicker2: https://github.com/farbelous/bootstrap-colorpicker
    时间选择器
    layDate: https://www.layui.com/laydate/
    wdatepicker
时间日期处理

Moment.js

  • Moment.js 是一个解析,验证,操作和显示日期和时间的Javascript 类库。
  • http://momentjs.com
  • https://github.com/moment/moment
    timeago.js
  • 轻量级的时间转换Javascript 库。
  • https://github.com/hustcc/timeago.is

8、表单验证

validator.js:https://github.com/chriso/validator.js
Query Validation

  • jQuery 表单校验。
  • https://github.com/iquery-validation/jquery-validation
    Validation Plugin
  • jQuery插件
  • http://www.imooc.com/learn/385
    Validform
  • 一行代码搞定整站的表单验证! - Jquery表单验证插件。
  • http://validform.rjboy.cn/
分页插件

pagination: https://github.com/superRaytin/paginationis

9、富文本编辑器

wangEditor: http://www.wangeditor.com/
百度 UEditor: https://ueditor.baidu.com/website/
CKEditor: https://ckeditor.com/
KindEditor:http://kindeditor.net/demo.php
MediumEditor: http://yabwe.github.io/medium-editor/
Simditor: http://simditor.tower.im/
Summernote: https://summernote.org/.
Quill: https://quilljs.com/
Slate: https://github.com/ianstormtaylor/slate

Markdown 编辑器

**Editor.md: **https://pandao.github.io/editor.md/

树插件

http://www.treejs.cn

图片懒加载

lazyload: https://github.com/tuupola/jquery_lazyload

瀑布流

Masonry: https://www.cnblogs.com/cjc917/p/7402026.html
Metro风兼瀑布流布局效果 http://www.lanrenzhijia.com/iquerv/1985.html

10、相册(图片滑动切换展示效果)

PC端:Viewer.is: https://fengyuanchen.github.io/viewerjs/
PC端:photoviewer
移动端:Photo Swipe: https:llwww.helloweba.net/javascript/460.html

导航插件

okayNav:http://www.dowebok.com/204.html

视频播放器

Chimee

  • 组件化H5播放器框架
  • http://chimee.org/
  • https://juejin.cn/post/6844903509582675981
    flv.is
  • Bilibili开源纯 JavaScript编写的FLV播放器
  • Flash 视频 (FLV)播放器
  • https://github.com/Bilibili/fIv.is
  • https://www.toutiao.com/a6478550535417889293

ckplayer: http://www.ckplayer.com/
player: http://www.jplayer.cn/
html5player: https://juejin.cn/post/6844903487910723592

11、Video.js

  • 开源、免费的HTML5和Flash视频播放器
  • video.js - 开源、免费的HTML5和Flash视频播放器

多青:https://dogeek.net/

弹幕视频播放器

DanmuPlayer -Html5弹幕视频播放器插件:https://github.com/chiruom/DanmuPlayer
jquery.danmu.js - jQuery弹幕插件:https://github.com/chiruom/iquery.danmu.is
scroxt - 字暮字体滚动插件:https://github.com/chenjianfang/scroxt

复制粘贴插件

clipboard.js: https://github.com/zenorocha/clipboard.js/
ZeroClipboard: https://github.com/zeroclipboard/zeroclipboard

条形码插件

barcode

二维码插件

jquery.qrcode.js:https://github.com/jeromeetienne/iquery-grcode

12、拖拽

Draggabilly:http://www.jg22.com/iquery-info293
dragula: https://www.toutiao.com/a6491847196890104334

手机端事件

touch.js

文件上传

uploader
WebUploader:

  • https://github.com/fex-team/webuploader/
  • HTML5 & FLASH 文件上传
代码高亮
  • highlight: https://highlightis.org/
前端国际化 i18n

i18next: https://github.com/118next/i18next
vue-i18n: https://github.com/kazupon/vue-i18n
前端系列--jquery.i18n.properties 前端国际化
解决方案“填坑日记”:http://www.cnblogs.com/landeanfen/p/7581609.html
基于jQuery.i18n.properties实现前端页面的资源国际化:http://m.blog.csdn.net/aixiaoyang168/article/details/49336709

13、

百度地图:http://bsyun.baidu.com/
谷歌地图:http://www.runoob.com/googleapi/google-maps-api-kev.html
高德地图:https://1bs.amap.com/
腾讯地图:https:/1bs.ag.com/

网页即时通讯

LayIM: http://layim.layui.com/
闲聊么:https://www.xianliao.mel

数据可视化

Charts: http://echarts.baidu.com/index.html
阿里云 DataV

PDF阅读器

https://github.com/mozilla/pdf.js

主题色提取

RGBaster:https://github.com/briangonzalez/
rgbaster.is
Color Thief
vibrant.js

14、前端存储

ustbhuangyi/storage:

  • 封装了 session Storage 和localStorage
  • https://github.com/ustbhuangyi/storage
    store.js
  • 本地存储localstorage的封装
  • https://github.com/jaywcilove/store.js
    **localForage: **https://github.com/localForage/localForage
数据 Mock

Easy Mock: https://github.com/easy-mock/easy-mock
Mockis:

  • http://mockjs.com
  • 生成任意随机数据,拦截 Ajax 请求

json-server + fakers:https://github.com/
typicode/json-server

15、其他

正浏览器版本过低提示插件 IEalertjs:
http://www.jqueryfuns.com/resource/455
lyric-parser - QQ音乐歌词解析:
https://github.com/ustbhuangyi/lyric-parser
holder.is - 图片占位符插件:
https://github.com/imsky/holder
jQuery 放大镜插件 jqzoom.js:
http://www.jg22.com/jquery-info648
Zooming -JavaScript 图片缩放库:
http://www.dowebok.com/223.html
fastclick- 消除click 移动浏览器 300ms延迟:
https://github.com/ftlabs/fastclick
jsonp - 一个简单的 JSONP实现:
https://github.com/webmodules/jsonp
js-base 64 - Base 64 编码解码:
https://github.com/dankogai/js-base64
新手引导:https://github.com/easelinc/tourist

你可能感兴趣的:(前端常用插件工具类库汇总)