前端组件

不要再重复造轮子了！

awesome-前端github:https://github.com/iq9891/awesome-frontend

CDN:

BootCDN:https://www.bootcdn.cn/

JQ插件寻找:http://plugins.jquery.com/

1.前端框架

Bootstrap:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

Layui:https://www.layui.com/demo/grid.html

 Semantic:  https://semantic-ui.com/introduction/getting-started.html

css样式:http://tachyons.io/docs/

css样式:https://milligram.io/#getting-started

2.弹窗

layer

3.表格

Bootstrap table:https://examples.bootstrap-table.com/

layui table:https://www.layui.com/doc/modules/table.html

4.树状结构,tree,树形控件

zTree:http://www.treejs.cn/v3/demo.php#_101

jQuery Treeview:https://www.runoob.com/jquery/jquery-plugin-treeview.html

jsTree:https://www.jstree.com/

fancyTree:http://wwwendt.de/tech/fancytree/demo/

JQtree:http://mbraak.github.io/jqTree/

Nestable:https://dbushell.com/Nestable/

5.文件上传组件

Dropzone Js -拖拽上传:https://www.dropzonejs.com/

6.图标

fontawesome:http://fontawesome.dashgame.com/

阿里巴巴矢量图标库:https://www.iconfont.cn/

?:https://emojipedia.org/

https://emoji.muan.co/

自己制作loading图标:https://loading.io/

7.图表

echarts:https://echarts.baidu.com/

G2: https://antv.alipay.com/zh-cn/g2/3.x/index.html

8.富文本编辑器

wangEditor:http://www.wangeditor.com/

simditor:https://simditor.tower.im/

9.代码美化

highlightjs: https://highlightjs.org/?snippet=9&style=15

craig:https://craig.is/making/rainbows

10.播放器

Jplayer:http://www.jplayer.cn/demos.html

videojs: https://videojs.com/

11.表单格式插件-控制输入格式

cleave.js: https://nosir.github.io/cleave.js/

12.引导组件-引导用户使用你的网站

牧羊人: https://shipshapecode.github.io/shepherd/docs/welcome/

intro.js:https://introjs.com/example/hello-world/index.html

13.下载组件

download:https://github.com/rndme/download

Downloadify : https://github.com/dcneiner/Downloadify

14.进度条

NProgress .js ：http://ricostacruz.com/nprogress/

progress.js ：https://github.com/usablica/progress.js

nanobar.js: http://nanobar.jacoborus.codes/

跟踪当前页面滚动条的进度条:https://christophercliff.com/sausage/

15.懒加载

imagesloaded: https://imagesloaded.desandro.com/

echo.js: https://github.com/toddmotto/echo

layzr.js: https://github.com/callmecavs/layzr.js

16.轮播图

 kenwheeler：http://kenwheeler.github.io/slick/

轻量级 glidejs: https://glidejs.com/

17.页面过度特效

 animsition: http://git.blivesta.com/animsition/

18.菜单

   metismenu: https://mm.onokumus.com/

19.视差特效

 parallax.js:  http://matthew.wagerfield.com/parallax/

20.ajax

fetch: https://github.com/github/fetch

21.二维码

 qrious：  https://github.com/neocotic/qrious

艺术的qart:   https://github.com/kciter/qart.js

22.css特效,动画

详细-动画特效:http://nec.netease.com/library/category/#animation

悬停:https://github.com/IanLunn/Hover

3D: https://github.com/peachananr/interactive_3d

过渡:https://github.com/h5bp/Effeckt.css

anime.js:https://animejs.com/documentation/#JSobject

标题动作特效:https://daneden.github.io/animate.css/

组件移动特效:http://visionmedia.github.io/move.js/

详细-组件震动特效(加上类就行):http://elrumordelaluz.github.io/csshake/