Skip to content

ck18781145809/wheels

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

GitHub上面的文章在这里哟~


目录

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

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

- 消息通知

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

- 懒加载

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

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

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

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

About

插件目录

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages