{"id":13672056,"url":"https://github.com/iamjoel/front-end-plugins","last_synced_at":"2025-11-03T16:11:44.723Z","repository":{"id":25642297,"uuid":"29077674","full_name":"iamjoel/front-end-plugins","owner":"iamjoel","description":":whale2: Web 前端常用插件","archived":false,"fork":false,"pushed_at":"2022-05-20T00:36:55.000Z","size":2606,"stargazers_count":1004,"open_issues_count":1,"forks_count":321,"subscribers_count":73,"default_branch":"master","last_synced_at":"2025-04-09T08:05:07.554Z","etag":null,"topics":["collection","front-end","plugins"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamjoel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-11T01:35:49.000Z","updated_at":"2025-03-24T06:52:43.000Z","dependencies_parsed_at":"2022-08-07T11:15:53.662Z","dependency_job_id":null,"html_url":"https://github.com/iamjoel/front-end-plugins","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamjoel","download_url":"https://codeload.github.com/iamjoel/front-end-plugins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535826,"owners_count":22087398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collection","front-end","plugins"],"created_at":"2024-08-02T09:01:25.486Z","updated_at":"2025-11-03T16:11:44.628Z","avatar_url":"https://github.com/iamjoel.png","language":"JavaScript","readme":"# Web 前端常用插件\n## 目录\n* [工具类](#tool)\n* [浏览器增强类](#browser-strong)\n* [表单类](#form)\n* [图片类](#img)\n* [图标类](#icon)\n* [UI 框架](#ui-framework)\n* [UI 组件类](#ui)\n* [用户体验增强](#ux)\n* [动画](#anim)\n* [SVG](#svg)\n* [测试](#test)\n* [其他类](#other)\n* [Bootstrap相关类](#bootstrap)\n* [Vue.js 相关](#vue)\n* [React 相关](#react)\n* [小程序](#min-app)\n* [GraphQL](#graphql)\n* [JS Plugins仓库](#repository)\n\n## \u003ca name=\"tool\"\u003e工具类\u003c/a\u003e\n* 方便操作对象，数组等的工具库\n    * [underscore.js](http://underscorejs.org/)\n    * [lo-dash](https://lodash.com/) 与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建\n    * [Sugar](https://github.com/andrewplummer/Sugar/) 在原生对象上增加一些工具方法\n    * [functional.js](https://github.com/leecrossley/functional-js/) 提够了一些Curry的支持\n    * [bacon.js](https://github.com/baconjs/bacon.js/) 函数式编程，cool\n    * [streamjs](https://github.com/winterbe/streamjs) 用流的方式来对数组，对象进行系列操作\n    * [clone.js](https://github.com/pvorb/clone) 对各种对象的深度复制。\n    * [deepmerge](https://github.com/TehShrike/deepmerge) 深度合并数组和对象。\n* 数据类型\n    * 字符串\n        * [strman](https://github.com/dleitee/strman) 字符串操作库。它为各种实用程序、格式选项和字符串转换，提供了超过 60 种实用的方法。\n    * 数字\n        * [BigDecimal.js](https://github.com/dtrebbien/BigDecimal.js) 提高精度的数字操作\n    * 对象\n        * [Watch.js](https://github.com/melanke/Watch.JS) 监视对象或属性的变化\n    * 时间\n        * [Moment.js](http://momentjs.com/)\n        * [day.js](https://github.com/iamkun/dayjs) 和 Moment.js 一样的 API。只有 2KB。\n        * [date-fns](https://date-fns.org/docs/) 现代时间库。\n        * [datejs](http://www.datejs.com/)\n    * 正则\n        * [rewrap](https://github.com/taijiweb/rewrap) 正则工具库。相关插件[regexp-frequent](https://github.com/taijiweb/regexp-frequent),[rewrap-patch](https://github.com/taijiweb/rewrap-patch)\n    * [parameter](https://github.com/node-modules/parameter) 验证参数的格式\n* 生成 uuid\n  * [Nano ID](https://github.com/ai/nanoid/)\n* 与服务器端交互\n  * [axios](https://www.npmjs.com/package/axios) 支持浏览器和 Node.js 的HTTP请求工具。axios 不支持jsonp。\n  * [jsonp](https://github.com/webmodules/jsonp)\n* 异步流程控制\n    * 发布订阅\n        * [eventproxy](https://github.com/JacksonTian/eventproxy) 朴灵出品\n        * [Arbiter.js](http://arbiterjs.com/) [详细](detail/Arbiter)\n    * [q](https://github.com/kriskowal/q/) Promise风格的\n    * [Async.js](https://github.com/caolan/async/)\n* 加载器\n    * [little-loader](https://github.com/walmartlabs/little-loader) JS 加载器。Webpack 不支持加载外部js，可用这个。\n* mock\n    * [Mock.js](https://github.com/nuysoft/Mock) 生成随机数据和mock Ajax 请求\n    * [jquery-mockjax](https://github.com/jakerella/jquery-mockjax) [mock](http://baike.baidu.com/view/2445748.htm) ajax请求\n* 浏览器探测\n    * [Bowser](https://github.com/ded/bowser) 探测具体浏览器和版本\n    * [ua-parser-js](https://github.com/faisalman/ua-parser-js) 探测具体浏览器和版本，操作系统，设备类型等\n* 调试\n    * [Eruda](https://github.com/liriliri/eruda/blob/master/doc/README_CN.md) Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。\n    * [vConsole](https://github.com/WechatFE/vConsole) 轻量、可拓展、针对手机网页的前端开发者调试面板插件。微信前端做。\n    * [console-polyfill](https://github.com/paulmillr/console-polyfill/) 能放心的使用 console.log()之类的console方法\n    * [log](https://github.com/adamschwartz/log) 让控制台输出的log有样式\n* [uri.js](https://github.com/medialize/URI.js) uri操作\n* [Cookie](https://github.com/ScottHamper/Cookies) 增删改cookie的工具库\n* [store.js](https://github.com/marcuswestin/store.js/) 对 localStorage 的封装。兼容 IE6+。\n* [director](https://github.com/flatiron/director) 前端路由库 [详细](detail/director)\n* [JSDoc](http://usejsdoc.org/) 根据javascript文件中注释的信息，生成API文档 [详细](detail/JSDoc)\n* [hotkeys](http://jslite.io/hotkeys/) 键盘事件的封装\n* [MD5](https://github.com/pvorb/node-md5) 用 MD5 的方式加密文件的库\n* [Exif.js](https://github.com/exif-js/exif-js) 读取 JPEG 图片的拍摄信息。可以通过拍摄信息中的 Orientation 来解决 ios 手机上传竖拍照片会逆时针旋转90度的问题。\n* [download](https://github.com/kevva/download) 实现下载的库。支持 url 和流。 [详细](detail/download)\n* 模板引擎\n  * [Handlebar](http://handlebarsjs.com/installation.html)\n  * [Ejs](http://www.embeddedjs.com/)\n  * [Jade](http://jade-lang.com/)\n* 生成pdf\n  * [jsPDF](https://github.com/MrRio/jsPDF) 在浏览器端生成 pdf。\n  * [pdfkit](http://pdfkit.org/)\n* Excel库\n  * [Node XLSX](https://github.com/mgcrea/node-xlsx) 支持解析和生成 xlsx 的问题。\n  * [js-xlsx](https://github.com/SheetJS/js-xlsx)\n* 打印\n  * [vuePlugs_printjs](https://github.com/xyl66/vuePlugs_printjs) 基于 Vue。\n* [compass.js](http://ai.github.io/compass.js/) 指南针。只有在手机浏览器上才能用。\n* [中国行政区域数据](https://github.com/airyland/china-area-data)\n* canvas\n  * [jcanvas](https://projects.calebevans.me/jcanvas) 基于 jQuery 的 canvas 工具库，支持托拽。[画画的Demo](https://projects.calebevans.me/painter/)\n* [lerna](https://github.com/lerna/lerna) 对一个项目中包含若干个 npm 包的管理。对这几个npm包内部依赖版本的管理和npm包的发布比较方便。\n* [TimeCat](https://github.com/oct16/TimeCat/blob/master/README.cn.md) 一套网页录屏的解决方案，利用其独特的算法，提供超高性能，超高压缩比的网页无损录制。可以广泛运作于监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景。\n\n## \u003ca name=\"browser-strong\"\u003e浏览器增强类\u003c/a\u003e\n### 让一些旧浏览器变牛逼的库\n* [Selectivizr](https://github.com/keithclark/selectivizr)  让IE 6-8一些的css3选择器\n* [ieBetter](https://github.com/zhangxinxu/ieBetter.js) 让ie6-8有高级浏览器的特性\n* [ExplorerCanvas](https://github.com/arv/ExplorerCanvas) 让IE8-的浏览器支持canvas\n* [CSS3 Pie](http://css3pie.com/) 让IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js时，box-radious的元素有背景色时，不显示背景色。。。\n* [formFive](http://etiennetalbot.github.io/formFive/) 让旧的浏览器支持HTML5表单的一些特性，如 placeholder,autofocus\n* [https://github.com/anselmh/object-fit](https://github.com/anselmh/object-fit) 让浏览器支持`object-fit`这css规则\n* [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) 一堆Polyfills\n* [flexibility](https://github.com/jonathantneal/flexibility) 让旧的 IE 也支持 Flexbox\n\n### 选择器增强\n* [Lining.js](https://github.com/zmmbreeze/lining.js) 让浏览器实现类似`::nth-line(), ::nth-last-line()`的效果\n\n### CSS 兼容性\n* [prefixfree](https://github.com/LeaVerou/prefixfree/) 根据 caniuse.com 数据库自动补全 CSS 私有前缀\n* [stickybits](https://github.com/dollarshaveclub/stickybits) `position: sticky` polyfills。\n\n## \u003ca name=\"form\"\u003e表单类\u003c/a\u003e\n* [jquery-file-upload](https://github.com/blueimp/jQuery-File-Upload) 上传文件组件 [详细](detail/fileUpload)\n* [zTree](http://www.treejs.cn/v3/main.php) 文件树形视图控件 [详细](detail/ztree)\n* [Treed](http://colorify.rocks/index.html) 树编辑器。感觉展示的感觉很像思维导图\n* [FileAPI](https://github.com/mailru/FileAPI) 对文件选择框内的文件的一些处理\n* [autosize](https://github.com/jackmoore/autosize) 让 文本域(textarea) 的高度随着文字内容的变高而变高。\n\n### 表单验证\n* [.Validate](https://github.com/jzaefferer/jquery-validation) [详细](detail/validate)\n* [jQuery-Validation-Engine](http://posabsolute.github.io/jQuery-Validation-Engine/)\n* 身份证验证\n  * [id-card-uitls](libs/id-card-uitls.js)\n  * [IdCard](https://github.com/NoBey/IdCard) 身份证的工具库，支持身份证号验证，获取地址，生日，男女等信息。\n\n### 表单元素美化\n* [uniform](http://uniformjs.com/) 提供对下拉框，单，复选框，按钮等表单元素的美化\n* [select2](http://ivaynberg.github.io/select2/index.html) 多选下拉框\n* [selectivity](http://arendjr.github.io/selectivity/) 和unfirom比较类似\n* [DropKick](http://robdel12.github.io/DropKick/) 下拉框，单，多选。外观比uniform好\n* [switchery](http://abpetkov.github.io/switchery/) ios7风格的开关组件\n* [nouislider](https://refreshless.com/nouislider/) 用滚动条来设置/控制（音量等）\n* 滑块/Range\n  * [vue slider component](https://github.com/NightCatSama/vue-slider-component) 基于 Vue。\n  * [slider](https://github.com/react-component/slider) 基于 React。\n  * [range.css](http://danielstern.ca/range.css/) 美化`input[type=range]`元素的外观\n* [Colorion](http://gradientbuttons.colorion.co/) 背景是渐变色的按钮。hover 时有动画效果。\n\n## \u003ca name=\"img\"\u003e图片类\u003c/a\u003e\n* [holderjs](http://imsky.github.io/holder/) 生成占位图片\n* [imagesLoaded](http://desandro.github.io/imagesloaded/) 选取的图片都加载好后执行调回\n* [gif.js](https://github.com/jnordberg/gif.js) 生成 gif 文件。\n* [core-video-to-gif](https://github.com/JackPu/core-video-to-gif) 将视频截取为 gif 的前端 JavaScript 类库。\n* [CSSgram](https://github.com/una/CSSgram) 用CSS3的Filter实现Instagram滤镜的库\n\n## \u003ca name=\"icon\"\u003e图标类\u003c/a\u003e\n* [Icon Font汇总](https://github.com/lvwzhen/iconpark)\n* SVG做的图标\n    * [svgicons](http://svgicons.sparkk.fr/)\n    * [iconic](https://useiconic.com/icons/)\n    * [hybicon.js](http://hybicon.softwaretailoring.net/documentation.html) 带交互效果。如 hover, click。 [详细](detail/hybicon)\n* HTML字符实体图标\n    * http://www.amp-what.com/\n* [transformicons](http://www.transformicons.com/) 图标点击时，会有一些变换效果。如，加号变成叉号\n* [css3patterns](http://lea.verou.me/css3patterns/) css3 做的可平铺纹理。浏览器兼容性不好。\n\n\n### 浏览图片\n* [fancybox](http://fancyapps.com/fancybox/) 弹出查看图片，视屏等等 [demo](http://fancyapps.com/fancybox/demo/)\n* [yoxview](http://www.yoxigen.com/yoxview/) 弹出查看图片，图片尺寸缩放很自然\n\n### 图片墙\n* [wookmark](http://www.wookmark.com/jquery-plugin)\n\n## \u003ca name=\"ui-framework\"\u003eUI 框架\u003c/a\u003e\n* [WeUI](https://github.com/weui/weui) 由微信官方设计团队为微信 Web 开发量身设计。\n* [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile) 阿里巴巴国际UED前端出品的移动端UI库。\n* [Framework7](http://framework7.io/)\n* [UIKit](https://getuikit.com/) Web 组件库，不依赖任何框架，组件类型多、功能强。\n* [wired elements](https://github.com/wiredjs/wired-elements) 手绘效果的组件库。它的底层是 Web components。\n\n## \u003ca name=\"ui\"\u003eUI 组件类\u003c/a\u003e\n### 拖拽\n* [dragula](https://github.com/bevacqua/dragula) 支持Draggable，Dropable和Sortable。感觉比jqueryUI的轻量级，好用的样子\n* [angular-dragula](http://bevacqua.github.io/angular-dragula/) dragular 官方的 angular 版本\n* [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) 支持托拽和自定义大小网格系统。\n\n### 数据可视化(图表)\n* [F2](https://github.com/antvis/f2/blob/master/README.zh-CN.md) 阿里出品。为移动端而生。\n* [Echarts](http://echarts.baidu.com/) 百度出品。 [Vue 版 Echart](https://github.com/ecomfe/vue-echarts)。\n* [D3.js](https://d3js.org/) 超灵活的做数据可视化的工具。\n* [highcharts](http://www.highcharts.com/) 功能强大。是收费的。\n* [Plottable.JS](http://plottablejs.org/) 基于D3的一个图表库\n* [flot](http://www.flotcharts.org/) 文档不给力\n* [chartJs](http://www.chartjs.org/) [中文文档](http://www.bootcss.com/p/chart.js/docs/)  demo很漂亮，很清晰。比较轻量级。\n* [ichartJs](http://www.ichartjs.com/) 中国的一个家伙搞的，感觉还不错。\n* k线图(k line)\n  * [Echarts的k线图](http://echarts.baidu.com/echarts2/doc/doc.html#K) 功能比较简单\n  * [kline](https://github.com/chxj1992/kline) 功能比较多，支持 webpack 等。\n* 流程图\u0026脑图\n   * [GGEditor](https://ggeditor.com/zh-CN) 基于 G6 和 React 的可视化图编辑器。支持流程图和脑图。阿里出品。\n\n### 时间选取组件\n* [foundation-datepicker](http://foundation-datepicker.peterbeno.com/example.html)\n* [DatePicker](https://github.com/foxrunsoftware/DatePicker/) 一个简单的日历 [详细](detail/datepicker)\n* [full calendar](http://fullcalendar.io/) 支持脱放的方式来改变待办事宜的时间\n* [Simple Events Calendar](http://preview.codecanyon.net/item/simple-events-calendar-js/full_screen_preview/462149?ref=themespotters) 外观很喜欢。收费 5$\n* [jQuery ui datepicker](http://jqueryui.com/datepicker/) 经典，不是很好看\n* [pickadate](http://amsul.ca/pickadate.js/) 轻量级，手机友好的，漂亮。但貌似只能在弹出层中显示，而没有下拉这种方式显示。\n* [zebra-datepicker](http://stefangabos.ro/jquery/zebra-datepicker/) 可配置性很强。但貌似只能在弹出在右上方。。。\n* [bootstrap-datepicker](http://www.eyecon.ro/bootstrap-datepicker/) bootstrap风格。\n* [dateRangePicker](https://github.com/dangrossman/bootstrap-daterangepicker) 选取时间段。bootstrap风格。该组件依赖Twitter Bootstrap, Moment.js和jQuery.\n* [v-calendar](https://github.com/nathanreyes/v-calendar) 基于Vue (版本需要 2.5+)。单日历，双日历，日期范围。\n\n### 滚动无限加载\n* [vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll) 饿了么出品。\n* [vue-recyclerview](https://github.com/hilongjw/vue-recyclerview) 高性能的滚动无限列表加载。为了提高性能，代码有重复利用 DOM。\n* [React Infinite Scroller](https://github.com/CassetteRocks/react-infinite-scroller) 基于 React。\n\n### 自定义/美化滚动条\n* [better scroll](https://github.com/ustbhuangyi/better-scroll) [文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/) 在PC上使用时的推荐配置： `{scrollbar:true,mouseWheel: {speed: 20,invert: false}}`\n* [perfect scrollbar](https://github.com/noraesae/perfect-scrollbar) 轻量级的滚动条。外观与mac上chrome的滚动条一样。 对 IE11- 兼容性不好。\n* [iscroll](http://iscrolljs.com) 在移动设备上用不错\n\n### 滚动条其他\n* [ScrollFix](https://github.com/joelambert/ScrollFix) 对 IOS 的滚动优化：局部滚动。配合使用： `overflow-y: scroll; /* has to be scroll, not auto */-webkit-overflow-scrolling: touch`。\n* [xscroll](https://github.com/huxiaoqi567/xscroll) 滚动相关的一堆牛逼功能。\n\n### 加载(Loding)效果\n* [CSS Spinners](https://github.com/jlong/css-spinners) CSS做的\n* [Loaders.css](https://connoratherton.com/loaders) CSS做的\n\n\n### 表格组件\n* [jsGrid](http://js-grid.com/) Data Grid。 [详细](detail/jsGrid)\n* [backgrid](http://backgridjs.com/) 基于Backbone.js的DataGrid\n* [excellentexport](https://github.com/jmaister/excellentexport) 把表格的内容生成excel。兼容 Firefox, Chrome, IE6+\n* [datatables](https://www.datatables.net/) 表格可交互（对内容进行排序，删除等）\n* [handsontable](https://handsontable.com/) 生成Excel外观的数据\n* [JSpreadsheets](http://jspreadsheets.com/) 表格数据的组件库\n* [jQuery Grid](http://gijgo.com/grid) by gijgo.com\n\n### 选取颜色\n* [Spectrum](http://bgrins.github.io/spectrum/?color=\u0026color2=%233355cc\u0026color3=%23000000#toc0)\n\n### 分享到SNS\n* [JiaThis](http://www.jiathis.com/) 生成分享代码。\n\n### 富文本编辑器\n* [Vue-Quill-Editor](https://github.com/surmon-china/vue-quill-editor) 将 [Quill](https://github.com/quilljs/quill) 封装成 Vue 组件。图片上传默认是把图片转成Base64来存，也支持监听上传事件，来将图片上传到服务器。\n* [ace](https://ace.c9.io/) 代码编辑器，可以用来做demo演示\n* [ckeditor](http://ckeditor.com/)\n* [ueditor](http://ueditor.baidu.com/website/) 百度做的。\n* [tinymce](https://www.tinymce.com/tryit/full.php) 对html内容进行实时的编辑\n* [summernote](https://github.com/summernote/summernote) 在移动设备上用不错\n\n### 通知组件\n* [notie.js](https://github.com/jaredreich/notie)\n\n### HTML5播放器\n* [jwplayer](https://www.jwplayer.com/) 被大量网站使用\n* [html5media](https://html5media.info/) 简单的h5player，轻量级\n* [jplayer](http://jplayer.org/) 功能强大，可换肤\n\n## 地图\n* [Leaflet](https://leafletjs.com/index.html) 开源的对移动端友好的地图工具库。\n\n### 展示\n* [Impress.js](https://developer.cdn.mozilla.net/media/uploads/demos/b/a/bartaz/54e3827142e4149a5c01db64c9517c84/impressjs_1333223745_demo_package/index.html#/bored) 各种旋转，和奇特的体验\n* [fullPage](http://alvarotrigo.com/fullPage/) 全屏显示。用滚轮来翻页 [详细](detail/fullpage) [2.9.7](https://github.com/alvarotrigo/fullPage.js/releases/tag/2.9.7) 以后的版本是收费的。\n* [zepto.fullpage](https://github.com/yanhaijing/zepto.fullpage) 专注于移动端的fullPage.js，依赖Zepto\n* [pagePiling](http://alvarotrigo.com/pagePiling/) 和fullPage类似\n* [turn.js](https://github.com/blasten/turn.js) 做一本书，带漂亮的翻页的效果\n* [timelinejs](https://github.com/ilkeryilmaz/timelinejs/) 用时间轴方式展示信息。\n* [coverflow](https://github.com/quietshu/coverflow)  苹果上唱片封面的效果（Apple Cover Flow UI effect）。\n\n### 幻灯\n* [vue-easy-slider](https://github.com/shhdgit/vue-easy-slider) 基于 Vue。\n* [SuperSlide](http://www.superslide2.com/)/[TouchSlide](http://www.superslide2.com/) 国产库！兼容IE6，焦点图/幻灯片/Tab标签切换/图片滚动/无缝滚动等常见效果，支持移动端\n* [slidesjs](http://slidesjs.com/) 挺好用的，只是那幻灯导航的CSS都要自己写，呵呵 [详细](detail/jquery.slide)\n* [iSlider](https://github.com/BE-FE/iSlider) 无任何插件依赖的手机平台javascript滑动组件 [详细](detail/iSlider)\n* [bgstretcher](http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html) 全屏幻灯，会随着页面大小的变化而变化。\n* [Swiper](https://github.com/nolimits4web/swiper/) 开源、免费、强大的移动端触摸滑动插件 [Swiper中文网](http://www.swiper.com.cn/)\n* [coin-slider](https://github.com/kopipejst/coin-slider/) 兼容IE6，不过其切换方式是一块块的。不能配置切换方式\n* [wowslider](http://wowslider.com/rq/jquery-image-viewer/)  幻灯切换时各种很炫的效果。收费。\n* [cycle2](http://jquery.malsup.com/cycle2/) 普通的幻灯，竟然不支持垂直滚动\n* [jcarousel](http://sorgalla.com/jcarousel/) 普通的幻灯，不兼容IE6\n* [reveal](https://github.com/hakimel/reveal.js) 3d滚动。做ppt相当不错\n* [nodePPT](https://github.com/ksky521/nodePPT) 国人做的，做ppt也相当不错。有些方面比 reveal做的还好。但生成导出的html有些问题\n* [roundabout](https://github.com/fredleblanc/roundabout) 3d切换，看的后面图片的边\n* [SmartPhoto](https://github.com/appleple/SmartPhoto) 专为移动设备打造的响应式图像查看器，它易于使用，并支持手势触摸操作，例如捏合或者滑动。同时，它还具备对初学者友好的大量实用的事件处理器，以及用户自定义选项。\n\n### 弹出框\n* [Magnific-Popup](https://github.com/dimsemenov/Magnific-Popup) 兼容PC，Mobile。还不错，有5k+的star\n* [layer](https://github.com/sentsin/layer) 国人开发的，兼容ie6+。不喜欢其调用方式。\n\n### 二维码\n* [QR Code Generator](https://github.com/kazuhikoarase/qrcode-generator/tree/master/js)\n* [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode) 生成二维码图片的jQuery 插件，很好用。该插件是基于 QR Code Generator 开发的。\n\n### 动画效果\n* [animate.css](https://github.com/daneden/animate.css) 预设了很多动画。\n* [transformjs](https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs) Made css3 transform super easy。腾讯出品。\n* [Scence.js](https://scene.js.org/) 做基于时间线的动画库。具体的若干时间点，给元素设置指定的样式。\n* [mixitup](https://mixitup.kunkalabs.com/) 用漂亮的动画效果来完成排序和筛选\n* [jQuery.Marquee](https://github.com/aamirafridi/jQuery.Marquee) 跑马灯效果\n* [quickflip](http://jonraasch.com/blog/quickflip-jquery-plugin) 卡片翻转效果\n* [卡片翻转效果2](http://nnattawat.github.io/flip/) 兼容性可以。写的比较简单：1，只支持x方向翻转 2,类名都是规定好的 3，只能被调用一次。 需要改写一下。我的改进版见[这里](https://github.com/iamjoel/be-grace-front-end-developer/tree/master/my-lib/flip/quickflip.js)\n* [TheaterJS](https://github.com/Zhouzi/TheaterJS) 模拟两个人在屏幕上对话\n* [midnight.js](https://github.com/Aerolab/midnight.js) 文字颜色随着背景变，屌炸了\n* [color-animation](http://www.bitstorm.org/jquery/color-animation/) jquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。\n* [transit](https://github.com/rstacruz/jquery.transit) 对元素进行css的变换\n* [tagcanvas](http://www.goat1000.com/tagcanvas.php) 3D标签云效果 [详细](detail/tagcanvas)\n* [iconate](https://github.com/bitshadow/iconate) 图片切换动画\n* [Snap.js](https://github.com/jakiestfu/Snap.js/) 左/右侧导航的出现效果\n* [CSS shake](http://elrumordelaluz.github.io/csshake/) 抖动动画\n* [ClickSpark.js](http://www.ymc.ch/sandbox/clickspark/demo.html) 点击后的一些酷炫的效果\n\n#### 视觉差插件\n* [ScrollMagic](https://github.com/janpaepke/ScrollMagic) 对 superscrollorama 的重写。\n* [scrollorama](https://github.com/johnpolacek/scrollorama) 比较简单\n* [superscrollorama](https://github.com/johnpolacek/superscrollorama) 能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。\n* [scrolldeck](https://github.com/johnpolacek/scrolldeck.js)\n* [stellar.js](https://github.com/markdalgleish/stellar.js) 让图片或背景图以不同速率移动，已停止维护。\n* [lax.js](https://github.com/alexfoxy/lax.js)\n\n\n### flash\n* [swfobj](https://code.google.com/archive/p/swfobject/wikis/documentation.wiki) 能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。 [详细](detail/flash)\n\n### 抽奖\n* [wScratchPad](https://github.com/websanova/wScratchPad) 刮刮卡刮奖效果\n* [jqueryrotate](http://beneposto.pl/jqueryrotate/) 旋转插件。可以用来做转盘抽奖效果\n\n### 其他工具类\n* [vue-clickaway](https://github.com/simplesmiler/vue-clickaway) 点击元素外侧，元素隐藏。\n\n## \u003ca name=\"ux\"\u003e用户体验增强类\u003c/a\u003e\n* [Intro.js](http://usablica.github.io/intro.js/) 用来介绍网站的功能很不错。也可以做新手引导。\n* [blockUI](http://jquery.malsup.com/block/) Lolding组件。\n* [simple-hint](https://github.com/catc/simple-hint) 提示信息。用css做的。兼容性IE 9+。\n* [dotdotdot](https://github.com/FrDH/jQuery.dotdotdot) 文字溢出时，添加在文字末尾加省略号\n* [jQuery-menu-aim](https://github.com/kamens/jQuery-menu-aim) 二级菜单的切换如Amazon主页上一样迅速\n* [AnythingZoomer](https://github.com/CSS-Tricks/AnythingZoomer/) 放大镜功能\n* [PRISM](http://prismjs.com/) 代码高亮\n* [please](http://www.checkman.io/please/) 按要求随机舒服的颜色\n* [Awesomplete](http://leaverou.github.io/awesomplete/) 输入的智能提示，自动补全\n* [proTip](http://protip.rocks/) 提示。感觉比 Bootstrap 的 tip 好\n* [Hammerjs](http://hammerjs.github.io/) 手势库。封装了 Swipe, Tap, Pinch, Pan等手势\n* [favico.js](http://lab.ejci.net/favico.js/) 动态改 favicon。牛逼是可以放视频~\n* [elevator.js](https://github.com/tholman/elevator.js) 用做电梯的方式，伴着背景乐，返回到页面顶部。 Just for fun。\n* [panorama_viewer](https://github.com/peachananr/panorama_viewer) 轻量级全景图。 代码不足两百行，基于 jQuery。\n* Toast\n  * [cxlt](https://github.com/chengxulvtu/cxlt-vue2-toastr) 基于 Vue2。\n* [Darkmode.js](https://github.com/sandoche/Darkmode.js) 给网站加上 dark 模式。\n* [vue-countTo](https://github.com/PanJiaChen/vue-countTo) 动画到跳到某个数字。Vue 组件。\n* [pagemap](https://larsjung.de/pagemap/) 给长页面加网页的缩略图。\n\n## \u003ca name=\"anim\"\u003e动画\u003c/a\u003e\n* [velocity](https://github.com/julianshapiro/velocity) 提高Jquery动画的性能。以及颜色动画之类的新特性。\n\n## \u003ca name=\"svg\"\u003eSVG\u003c/a\u003e\n* [Snap.svg](http://snapsvg.io/) 操作 SVG 的 JS 库。号称 SVG 的 jQuery。[demo](detail/snap)\n* [walkway](https://github.com/ConnorAtherton/walkway) 以动画的方式，渐渐地画出 SVG 的路径。\n\n## \u003ca name=\"test\"\u003e测试\u003c/a\u003e\n* 测试框架\n  * [Jest](https://jestjs.io/)\n  * Mocha\n* 断言库\n  * [Power Assert](https://github.com/power-assert-js/power-assert)\n  * Chai\n  * Should\n* Snoion\n* [DeviceMock.js](http://rm-labo.com/labo/devicemock/) mock 设备。\n* 端到端测试\n  * Puppeteer\n  * [BackstopJS](https://github.com/garris/BackstopJS)\n  * 录制浏览器交互并生成测试脚本\n    * [Puppeteer Recorder](https://github.com/checkly/puppeteer-recorder) 生成 Puppeteer 的。\n    * [softest](https://github.com/prprprus/softest/blob/master/README-zh.md) 基于 Puppeteer 构建的。支持多 Tab，截图等 Puppeteer Recorder 不支持的功能。\n\n\n## \u003ca name=\"other\"\u003e其他类\u003c/a\u003e\n* 复制到剪贴板\n  * [clipboard.js](https://github.com/zenorocha/clipboard.js) Modern copy to clipboard. No Flash. Just 3kb gzipped.\n  * [ZeroClipboard](https://github.com/zeroclipboard/ZeroClipboard) 将内容复制到剪切板兼容主流浏览器的解决方案 [详细](http://www.jianshu.com/p/1a74c112f962)\n* [html2canvas](http://html2canvas.hertzen.com/) html转化成canvas，可以用来做截图。[详细](detail/html2canvas)\n* [Ink](http://zurb.com/ink/) 响应式html邮件框架\n* [性能测试](https://benchmarkjs.com/)\n* 抓取，解析RSS内容（不能跨域，所以后台要做代理，所谓的解析Rss其实就是解析xml）\n    * [jFeed](https://github.com/jfhovinne/jFeed)\n    * [jRss](https://github.com/malderete/jRss)  简单版的jFeed\n* [scriptcam](http://www.scriptcam.com/) 与摄像头交互\n* [cylon.js](https://cylonjs.com/) 机器人框架，支持35个平台\n* 图片的瀑布流展示\n  * [Masonry](https://github.com/desandro/masonry) 依赖 jQuery。\n  * [bricks.js](https://github.com/callmecavs/bricks.js) 高性能版 Masonry。不依赖 jQuery。\n* [devices.css](https://github.com/marvelapp/devices.css) 移动设备边框的外观。做原型的时候用不错。\n* [city](https://github.com/basecss/city) 国家行政区划分数据。从国家统计局拿的。 [城市数据](https://github.com/basecss/city/blob/master/lib/citydata.json)\n* [全栈JavaScript错误监控](https://fundebug.com/) 提供监控报错的服务。\n\n## \u003ca name=\"bootstrap\"\u003eBootstrap相关类\u003c/a\u003e\n* [Bootbox.js](http://bootboxjs.com/) 对bootstrap的弹出框做的一些封装\n* 免费皮肤\n    * [AdminLTE](https://github.com/almasaeed2010/AdminLTE)\n    * [gentelella](https://github.com/puikinsh/gentelella)\n\n## \u003ca name=\"vue\"\u003eVue相关\u003c/a\u003e\n* 全家桶\n  * [vue-router](https://github.com/vuejs/vue-router) 官方提供的路由插件\n  * vuex\n* 手机 UI 库\n    * [Vant](https://www.youzanyun.com/zanui/vue#/zh-CN/component/quickstart) 有赞出品。组件比 Mint UI 多。\n    * [Nut UI](https://nutui.jd.com/#/intro) 京东出品。\n    * [Weex Ui](https://alibaba.github.io/weex-ui/#/cn/) 阿里出品。有些业务组件是 Vant 没有的。\n    * [Cube UI](https://didi.github.io/cube-ui/#/zh-CN) 滴滴出品。基于 Vue.js 实现的精致移动端组件库。\n    * [Mand Mobile](https://didi.github.io/mand-mobile/#/home) 滴滴出品。面向金融场景的Vue移动端UI组件库。 有些业务组件值得参考。\n    * [Mint UI](https://github.com/ElemeFE/mint-ui) 饿了么出品。\n    * [vux](https://github.com/airyland/vux) 一个凑合的 Vue.js 移动端 UI 组件库。\n    * [vue-weui](https://github.com/aidenZou/vue-weui) weui 的 vue 实现。\n* 管理后台\n    * [Element UI](https://github.com/ElemeFE/element) 饿了么出品。\n    * [iView Admin](https://github.com/iview/iview-admin) 基于 [iView](https://www.iviewui.com/) 做的后台。 Talking Data 出品。\n    * [Vue Admin](https://github.com/fundon/vue-admin)\n    * [Vue Manage System](https://github.com/lin-xin/vue-manage-system) 基于 Element UI。支持多 Tab 选项卡等功能。\n    * [D2 Admin](https://github.com/FairyEver/d2admin-vue-element) 基于 Element UI。简约主题。支持 首屏加载等待动画等。\n    * [avue](https://github.com/nmxiaowei/avue) 对 Element UI 的二次封装，收费。\n* [Muse UI](https://github.com/museui/muse-ui) Material Design 的 Vue 实现。\n* [buefy](https://github.com/buefy/buefy) 基于 Vue 的轻量级 UI 组件库。\n* [Vue-head](https://github.com/ktquez/vue-head) 管理head标签中的信息。\n* [vue-i18n](https://github.com/kazupon/vue-i18n) 多语言解决方案。\n\n## \u003ca name=\"react\"\u003eReact 相关\u003c/a\u003e\n* 管理后台\n    * [Zent](https://www.youzanyun.com/zanui/react/guides/install) 有赞出品。Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。 \n\n## \u003ca name=\"min-app\"\u003e小程序\u003c/a\u003e\n* 其他框转小程序(转译型框架)\n  * [mpvue](http://mpvue.com/) 美团出品。 Vue 转微信小程序、百度智能小程序、头条小程序 和 支付宝小程序。\n  * [WePY](https://github.com/Tencent/wepy) 类 Vue 写法转 小程序。\n  * [Taro](https://github.com/NervJS/taro) 京东出品。React 转生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用。\n  * [Chameleon](https://cmljs.org/doc/) 滴滴出品的不同环境的跨端整体解决方案。\n  * [uniapp](https://uniapp.dcloud.io/) DClound出品。生成 App，小程序，H5。\n  * [graceUI](http://grace.hcoder.net/) 可生成 uniapp 和 小程序代码。小额收费。\n* 增强型小程序框架\n  * [MPX](https://didi.github.io/mpx/) 滴滴出品。致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序\n* 组件库\n  * [iView webApp](https://weapp.iviewui.com/) Talking Data 出品。\n  * [MinUI](https://meili.github.io/min/index.html) 蘑菇街出品。\n  * [zanui-weapp](https://github.com/youzan/zanui-weapp) Vant UI 的小程序版。有赞出品。\n\n## \u003ca name=\"graphql\"\u003eGraphQL\u003c/a\u003e\n* [prisma](https://github.com/prismagraphql/prisma/)  Prisma turns your database into a realtime GraphQL API。\n\n## \u003ca name=\"repository\"\u003eJS Plugins仓库\u003c/a\u003e\n* [jQuery Cards](http://jquerycards.com/) 高质量的 jQuery 插件网站\n* [jster](http://jster.net/)\n* [node modules](https://nodejsmodules.org/)\n* [npmrank](http://anvaka.github.io/npmrank/online/) Sort npm packages by page rank\n* [YOU MIGHT NOT NEED JQUERY PLUGINS](http://youmightnotneedjqueryplugins.com/) 不依赖 jQuery 的 js 插件。\n* [awesome-nodejs](https://github.com/vndmtrx/awesome-nodejs)\n* Vue\n  * [Awesome Vue.js](https://github.com/vuejs/awesome-vue)\n  * [awesome-github-vue](https://github.com/vndmtrx/awesome-nodejs)\n* [Libraries.io](https://libraries.io/) 各种语言的库\n* [OniUI](http://ued.qunar.com/oniui/index.html#avalon.accordion.doc.html) 去哪儿网做的一套基于Avalon的框架\n","funding_links":[],"categories":["目录","JavaScript"],"sub_categories":["插件"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamjoel%2Ffront-end-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamjoel%2Ffront-end-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamjoel%2Ffront-end-plugins/lists"}