基于 html5+css3 前端切图实现微场景秀 切图秀

http://git.oschina.net/qietuwang/qietuxiu/tree/master/css

 

图标：

15套华丽的的扁平设计风格的图标 http://www.cnblogs.com/lhb25/p/15-gorgeous-sets-flat-designed-icons.html

程序员给女朋友用HTML5制作的3D相册http://www.webhek.com/misc/3d-album

电子电路模拟 CircuitJS1 http://www.oschina.net/p/circuitjs1

模拟物理作用力和重力效应的Chipmunk-js插件库 一个例子: http://www.htmleaf.com/Demo/201506142031.html  官方: https://github.com/josephg/Chipmunk-js   官方例子: http://dl.dropbox.com/u/2494815/demo/index.html
reveal.js H5幻灯片ppt效果 Demo: https://github.com/hakimel/reveal.js/wiki/Example-Presentations
Round Slider 是 jQuery 插件，允许用户选择一个值或者一个范围的值。不仅仅是个圆形滑块，还支持半圆形，饼形。http://www.oschina.net/p/roundslider
grafi.js 是一个 JavaScript 图形处理库  http://grafijs.org/

13 款最棒的 jQuery 图像 360° 旋转插件 http://www.admin10000.com/document/4021.html

一个叫3deye.js的插件。该插件支持桌面与移动终 端iOS与Android， 它的demo程序：http://www.voidcanvas.com/demo/28823deye/

20 个具有惊艳效果的 jQuery 图像缩放插件　https://www.oschina.net/translate/20-jquery-image-zoom-plugins-for-stunning-effects

适用于仪表盘项目的 7 个优秀 JavaScript 库 https://my.oschina.net/editorial-story/blog/873650

5款好用的开源JS图片裁剪插件(3个jQuery插件，2个AngularJS插件) http://blog.csdn.net/cuixiping/article/details/45966177 　注意，国人开发的cropper.js，支持移动端

 

环景和全景
jQuery 360度全景图插件 PANORAMA VIEWER 下载: http://www.jq22.com/jquery-info303 demo: http://www.jq22.com/yanshi303
13 款最棒的 jQuery 图像 360° 旋转插件 http://www.admin10000.com/document/4021.html
几款非常棒的 jQuery 全景图片展示插件 http://www.cnblogs.com/lhb25/archive/2012/11/12/jquery-plugins-for-panoramic-image-views.html

 

 

画廊 ,幻灯片

Owl Carousel是一个强大、实用但小巧的jQuery幻灯片插件 https://owlcarousel2.github.io/OwlCarousel2/　参数说明：http://www.dowebok.com/93.html
3D画廊 http://tympanus.net/Development/3DGallery
LightGallery.js – 是一个轻量级的模块化、响应式的灯箱画廊，它允许您创建美丽的图像和视频画廊。借助缩略图插件的帮助，Lightgallery 允许您创建缩略图画廊。它支持触摸屏设备上滑动导航以及桌面设备的鼠标拖动，还允许用户浏览缩略图和原图之间通过滑动手指或鼠标拖动。https://sachinchoolur.github.io/lightgallery.js/
Rondell画廊 http://projects.sebastianhelzle.net/jquery.rondell/
jcarousel画廊 http://sorgalla.com/jcarousel/
fotorama画廊 http://fotorama.io/
jquery图片幻灯片,Jquery特效 http://www.iteye.com/topic/1132110
30个精美的jQuery幻灯片效果插件和教程 http://www.cnblogs.com/lhb25/archive/2011/08/18/stunning-jquery-slider-plugins-and-tutorials.html
10个精选 jQuery 幻灯片插件 http://www.siqiboke.com/post/492.html
SLF一个很不错的画廊http://darsa.in/sly/#!examples　支持垂直和水平方向
满屏画廊：http://buildinternet.com/project/supersized/
marquee.js – jQuery 多功能无缝滚动插件 http://wange.im/demo/marquee-slide/marquee_slide.html
jQuery幻灯片插件 Smoothslides 图片可移动，并且可设置移动的方向 http://www.dowebok.com/demo/187/
jQuery 图片插件 Viewer-jQuery 简单的图像插件。 特点： 触控支持 缩放 旋转 翻转 键盘支持 跨浏览器支持 http://www.oschina.net/p/viewer-jquery
使用AD Gallery制作强大的相册画廊 http://www.helloweba.com/view-blog-61.html
jquery图片滚动特效banner http://www.17sucai.com/pins/demoshow/349
自动播放 http://bxslider.com/examples
jquery幻灯片插件slidr.js http://www.jq22.com/jquery-info430
jQuery和CSS3炫酷3D旋转画廊特效插件  http://www.jq22.com/jquery-info2095
非常全面新的jQuery图片画廊和滑块 http://www.open-open.com/news/view/1cb0eb2
上下滑动轮播幻灯片特效代码，支持自动满屏显示，带有上下箭头控制条 http://js.itobe.cn/contents/t/02/20140105153458/info.htm demo:http://js.itobe.cn/contents/t/02/20140105153458/view/demo.htm
超酷炫的jQuery焦点幻灯片特效代码 http://js.itobe.cn/contents/t/02/20140105171822/info.htm demo :http://js.itobe.cn/contents/t/02/20140105171822/view/demo.htm
jQuery和CSS3炫酷全屏垂直滚动切换幻灯片 http://www.htmleaf.com/jQuery/Slideshow-Scroller/201506102009.html demo:http://www.htmleaf.com/Demo/201506102010.html
JQUERY BANNER焦点图片切换图片上下翻滚、图 http://www.17sucai.com/pins/demoshow/349
pageSwitch.js插件实现图片翻转切换效果 http://www.lanrenzhijia.com/js/css3/3116.html， Demo:http://demo.lanrenzhijia.com/2015/pageSwitch0707/
TouchSlider.js则侧重于在滑动效果下，不仅支持全屏切换，还支持不固定尺寸的幻灯切换 http://u.boy.im/touchslider/
jQuery cxScroll 间歇式无缝滚动 http://code.ciaoca.com/jquery/cxScroll/demo/
照片墙 https://github.com/oriongunning/gridder
Swiper 触摸画廊 http://idangero.us/swiper/
简约的轮播组件 Lory http://www.oschina.net/p/lory
jQuery 轮播图插件 Unslider.js 仅有3KB大小 http://www.bootcss.com/p/unslider/
FlexImages 是一款轻量级的 JavaScript 画廊插件 http://www.oschina.net/p/fleximages

30 个最棒的 jQuery 的拖放插件,包括门户，布局，orgChart组织部门图，Nestable等功能 http://www.oschina.net/news/58038/jquery-drag-and-drop-plugins
7种鼠标悬停效果，多样的图片说明展示 http://tympanus.net/Tutorials/CaptionHoverEffects/CaptionHoverEffects.zipDemo:http://www.yyyweb.com/demo/inner-show/caption-hover.html
惊艳视差滚动效果的 jQuery 插件 http://www.cnblogs.com/lhb25/archive/2012/09/13/jquery-parallax-and-scrolling-effect-plugins.html
推荐15款创建漂亮幻灯片的 jQuery 插件 http://www.cnblogs.com/lhb25/p/15-jquery-slideshow-plugins.html
为应用程序设计的 10 个超酷的图标集 http://www.oschina.net/news/54982/10-cool-icon-sets-for-app-design
fancybox.js 图片放大预览，支持轮播 http://fancybox.net
EasyFader 是一款轻量级的响应式幻灯片插件，Gzip 压缩之后之后仅 1.5 KB。因为 EasyFader 是轻量级的，所以它并没有太多花哨的功能，但幻灯片的基本功能是一个都不少的，比如箭头控制、项目导航、切换间隔、切换动画持续时间、回调函数等。 https://www.oschina.net/p/easyfader
jQuery Revolution Slider：强大的视差响应幻灯插件 jQuery Revolution Slider（jquery.themepunch.revolution.js）是一个具有视差功能的幻灯片插件，此插件是wordpress上目前为至最强大的幻灯片插件，具有自适应功能、可创建全宽幻灯片、具有视差效果，所有幻灯片拥有的功能他全部拥有　https://revolution.themepunch.com/examples-jquery/

pbTouchSlider　很大气 是一款基于 jquery 的滑动响应式幻灯片插件，它除了一般幻灯片基本的如箭头控制、圆点控制、缩略图功能外，还支持响应式设计和滑动控制，同时 pbTouchSlider 还可以针对平板、手机设备分别设置高度，这使得 pbTouchSlider 能够适应各种设备。https://www.oschina.net/p/pbtouchslider

 

 

仪表盘

meter gauge, jqplot插件 http://www.jqplot.com/deploy/dist/examples/meterGauge.html
gauge-meter.js http://codecanyon.net/item/gauge-meter/full_screen_preview/4907507
18个有用的图标插件 http://freebiesdesign.com/18-useful-jquery-charts-plugins/
hcharts的仪表盘例子 http://www.hcharts.cn/demo/index.php?p=59,参数说明:http://blog.csdn.net/javaliuzhiyue/article/details/9943751
JustGage简单好看仪表盘  http://www.justgage.com/,文档:http://blog.csdn.net/craryprimitiveman/article/details/22166557
Gauge.js http://bernii.github.io/gauge.js/
jsgauges http://codecanyon.net/item/jsgauges/982713?ref=telyva
JustGage 是一个 JavaScript 插件来生成很漂亮的仪表盘  http://www.justgage.com/
d3扩展gauge 1.http://bl.ocks.org/msqr/3202712, 2. http://jsfiddle.net/mr23/vJuNU/, 3. http://codepen.io/jaketrent/pen/eloGk
网页饼图组件 easyPieChart http://www.oschina.net/p/easypiechart

 

图片文本滚动

12款很好用的 jQuery 图片滚动插件 http://www.cnblogs.com/lhb25/p/jquery-image-slider-plugins.html
jQuery+CSS实现的图片滚动效果 http://www.helloweba.com/view-blog-139.html
不间断滚动jquery特效不停从右往左滚动图片特效 http://www.divcss5.com/css-texiao/texiao656.shtml
万能滚动插件（包含文字滚动、图片上下滚动、图片左右滚动、图片渐隐渐现滚动、图片消失与出现滚动等） https://github.com/kujian/power-slider
jquery 图片滚动xslider 插件图片左右滚动、上下滚动 http://sandbox.runjs.cn/show/ek2be6kx
带左右控制按钮的图片滚动 http://www.html5cn.org/article-5120-1.html
14个jQuery Carousel特效插件 http://www.solagirl.net/jquery-carousel-plugins.html
jQuery图片文本滚动切换插件jCarouselhttp://www.zhangxinxu.com/wordpress/2009/12/jquery%E5%9B%BE%E7%89%87%E6%96%87%E6%9C%AC%E6%BB%9A%E5%8A%A8%E5%88%87%E6%8D%A2%E6%8F%92%E4%BB%B6jcarousel%E4%B8%AD%E6%96%87%E7%BF%BB%E8%AF%91%E4%B8%8E%E8%AF%A6%E8%A7%A3/
jMyCarousel 图片滚动 http://www.enova-tech.net/jmycarousel
jQuery图片切换插件jquery.cycle.js  http://jquery.malsup.com/cycle/， 一个教程：http://blog.csdn.net/itmyhome1990/article/details/30480141
jQuery power-slider 全能图片文本滚动插件 http://caibaojian.com/power-slider, Demo : http://caibaojian.com/demo/power-slider/index.html
textSlider 文字滚动插件 http://www.css88.com/demo/textSlider/textSlider.html

思维导图jquery插件
JS思维导图类库 jsMind http://www.oschina.net/p/jsmind
在线脑图编辑器 Kity Minder http://www.oschina.net/p/kityminder
思维导图工具 my-mind http://www.oschina.net/p/my-mind

绘制UML图的JS库 jsUML2 http://www.uco.es/users/in1rosaj/tools/jsUML2/editor/index.html
图片格式转换 Img2css http://www.oschina.net/p/img2css

图表

让数据栩栩如生 AntV 是蚂蚁金服全新一代数据可视化解决方案  https://antv.alipay.com/zh-cn/index.html
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
G6 是解决流程图和关系分析的图表库，集成了大量的交互，可以轻松的进行动态流程图和关系网络的开发。
F2 是面向移动端的一套基于可视化图形语法的图表库，具有精简、高性能、易扩展的特性。适用于对性能、大小、扩展性要求严苛的场景。(很优秀)

14种流行的基于JavaScript的数据可视化工具 http://my.oschina.net/pydevops/blog/675941
推荐 14 款基于 JavaScript 的数据可视化工具  http://www.oschina.net/news/69431/14-popular-data-visualization-tools
20 个最棒的 JavaScript 图表库 http://www.oschina.net/translate/20-best-javascript-chart-libraries
Google Charts谷歌图表 https://developers.google.com/chart/interactive/docs/examples
jQuery图表（jqPlot,Highcharts） http://liuzidong.iteye.com/blog/1534360
几款实用的 JavaScript 图形图表库 http://www.cnblogs.com/lhb25/p/6-libraries-for-visualized-charts-graphs.html
jQuery Visualize Plugin http://www.filamentgroup.com/examples/charting_v2/index_2.php,浏览器支持：IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9.
HTML5 canvas在IE中不支持但是Google维护了一个类库能将Canvas翻译成VML，这样可以允许在任意版本IE中运行
jQuery Sparklines 动态图表 http://omnipotent.net/jquery.sparkline/#s-about
JavaScript图表Highcharts http://www.highcharts.com/, 中文网http://www.hcharts.cn/, 演示 http://www.hcharts.cn/demo/index.php
在线进度条：http://preloaders.net/
用于构建交互式图表的最佳 jQuery 图表库 http://www.oschina.net/translate/best-jquery-chart-libraries-for-building-interactive-charts
5个最顶级jQuery图表类库插件 http://www.gbtags.com/technology/jquery/jquerytop5charting/
10 个 jQuery 图表插件推荐 http://blog.jobbole.com/21136/
jsPlumb jQuery插件 jsPlumb这个jQuery插件为开发者提供了一种可视化连接网页元素的方法http://jsplumbtoolkit.com/demo/home/dom.html，
jsPlumb开发入门教程（实现html5拖拽连线）http://blog.csdn.net/zhaoxy_thu/article/details/9532143
Jquery+jsPlumb流程图实现      http://hi.baidu.com/dlbup/item/125f24c982e61878ced4f802,
使用jsPlumb制作流程图设计器http://www.cnblogs.com/lwme/p/use-jsplumb-make-flowChart-designer.html，
使用 JsPlumb 绘制拓扑图的通用方法 http://blog.csdn.net/lovesqcc/article/details/14003987
BPMN 2.0 渲染工具包 bpmn-js 制作流程图 http://www.oschina.net/p/bpmn-js
Echarts动态加载图表数据 http://www.iteye.com/topic/1134808

ECharts 开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，http://echarts.baidu.com/doc/example.html
Chart.js 允许您使用 <canvas> 标签创建简单的HTML5图表，在所有现代浏览器中都具有出色的渲染性能。 绝对是列表中最有用和最优雅的库之一 官方: http://www.chartjs.org/
bizcharts 阿里巴巴开源图表库 Bizcharts，http://bizcharts.net/products/bizCharts/demo 比echarts简单易用
D3 http://d3js.org/,官网有例子, 中文介绍:https://github.com/mbostock/d3/wiki/CN-Home, 教程:http://www.pkuwwt.tk/d3-tutorial-cn/fundamentals.html 其他例子http://dimplejs.org/examples_index.html
NVD3.js, 基于D3扩展 http://www.oschina.net/p/nvd3js 例子http://nvd3.org/examples/ 是一个基于D3.js的开源图表JavasScript 类库，它可生成具有交互性的图表，定制性也非常高。它可用于绘制线性图、柱状图、饼图等多种常见的图表类型。它的使用方法也非常简单，如果你正好用过 D3.js，上手是相当容易的。
C3.js 0.4.8, 基于D3扩展 发布，开源图表库 http://www.oschina.net/news/57917/c3-js-0-4-8, 例子:http://c3js.org/examples.html
流程图前端展示控件 d3-process-map http://www.oschina.net/p/d3-process-map
xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库 http://tenxer.github.io/xcharts/examples/
可视化库 Vis.js http://www.oschina.net/p/visjs
Chartist.js 是简单的响应式图表 http://www.oschina.net/p/chartist-js
Epoch 是一个通用的实时的图表库 http://fastly.github.io/epoch/
国人开发的图表库 ACharts,非常优秀 http://acharts.github.io/, 文档:http://spmjs.io/docs/acharts/wiki/04-series.html，坐标轴基类https://github.com/acharts/achart-axis/blob/master/wiki/1-base.md
js charts 很不错 http://www.jscharts.com/
jQuery Visualize Plugin 是一个根据表格的内容自动生成图表的 jQuery 插件 http://www.oschina.net/p/jquery+visualize+plugin
使用Raw你可以在数分钟内就轻松完成一些高级数据可视化工作 http://www.oschina.net/p/raw
Protovis 是一个可视化 javaScript 图表生成工具  http://www.oschina.net/p/protovis
rossfilter 是一个用来展示大数据集的 JavaScript 库，支持超快的交互 http://www.oschina.net/p/crossfilter
Dracula 是用一系列的工具来显示和布局互动图表，包括各种相关的算法, 图形跟图形关联 http://www.graphdracula.net/
图像图标库 Yako.js http://www.oschina.net/p/yako-js
国人开发拓扑图展示工具 ctopo  http://www.oschina.net/p/ctopo
圆形进度条 jQuery 插件 CircularLoader.js http://www.oschina.net/p/circularloader-js
圆形进度条 ProgressPieSVG http://www.oschina.net/p/progresspiesvg
SVG Drawing Animation – SVG 绘制动画 http://www.cnblogs.com/lhb25/p/svg-drawing-animation.html
MetricsGraphics.js 是一个可视化数据图表库，可在网页上呈现时间序列数据。它很小，60kb之内，但它提供了一个简便方法来产生图像常见类型。当前这个库支持折线图、散列图、直方图、条形图、图表、甚至是基本的线性回归。http://www.oschina.net/p/metrics-graphics
开发者用了都说好的5款JavaScript图表库 http://my.oschina.net/sqzy/blog/473479
jqPlot 优秀的图表插件 在jqPlot图表插件使用说明（一） http://blog.csdn.net/tang19880721/article/details/33725743 jqPlot图表插件使用说明（二） http://my.oschina.net/treenewbee/blog/489968
流程图插件 Flowchart.js http://www.oschina.net/p/flowchart-js
JavaScript 图像库 plotly.js http://www.oschina.net/p/plotly-js
鱼骨图: http://bl.ocks.org/bollwyvl/9239214#d3.fishbone.js
Javascript 生成流程图 dagre-d3  http://www.bkjia.com/webzh/1039967.html
web流程图JS插件：dagre-d3 http://blog.csdn.net/inuyasha1121/article/details/49095991
拖拽绘制流程图 workflowcanvas dagre.js 提供 可以实现拖拽绘制流程图  http://www.oschina.net/p/workflowcanvas
数据探查与可视化平台Caravel http://www.ctocio.com/ccnews/20665.html
Qunee for HTML5 – 开发清新、高效的拓扑图组件  http://qunee.com/
强大的JavaScript响应式图表Chartist.js http://www.codeceo.com/article/chartist-js.html
MetricGraphics.js – 时间序列数据的可视化 http://metricsgraphicsjs.org/examples.htm
JavaScript图表图形框架 — GOJS简介 http://www.devtalking.com/articles/gojs-simple-diagram/ 官网例子: http://gojs.net/latest/samples/icons.html

 

画图插件

gojs画图利器 https://gojs.net/latest/index.html 官方例子: https://gojs.net/latest/samples/index.html GoJS入门文档：https://www.jianshu.com/p/9001d6b292d8
js画图的库，还是joint.js合适一些，对于简单的图显示很适用。具体链接：http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html
拓补图编辑器 Graph.Editor http://www.oschina.net/p/graph.editor

 

 

树形和组织

国人开发OrgChart 是门槛较低的用以构造漂亮组织结构图或树状结构图的插(功能十分强大)件。 https://github.com/dabeng/OrgChart  http://www.oschina.net/p/orgchart
国人jquery组织架构图插件(垂直或者水平方向混合) https://segmentfault.com/a/1190000010978444 非常好，值得优化和增加功能
SpaceTree 特殊的树形结构展示，很优秀 https://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html
Treant.js 一个树形结构图javascript库(垂直或者水平方向)  http://www.btfw.org/m/?post=503  官网: http://fperucic.github.io/treant-js/
功能强大的getorgchart组织架构图 http://www.getorgchart.com/
jquery-hortree 水平向下树和组织 https://github.com/alesmit/jquery-hortree
jquery-horizontal-tree 竖型树 http://aeonian.in/jquery-horizontal-tree/
jOrgChart组织部门图(无更新) https://github.com/wesnolte/jOrgChart, 实现例子: http://blog.csdn.net/linruonan90/article/details/38666283
jquery-orgchart组织部门图(无更新) https://github.com/caprica/jquery-orgchart
支持编辑的Org组织架构jOrgChart Demohttp://runjs.cn/detail/jwe6ccoj
Org展示组织机构的树形组件 http://www.douban.com/note/301315901/ 里面许多有用的工具
一个非常不错的组织架构图 https://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=40&lang=en 可以单页也可以全部显示 功能十分强大
可编辑的组织架构图  https://www.jqueryscript.net/chart-graph/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin.html
Simple Hierarchical Organization 简单的组织架构图(垂直或者水平方向混合) https://www.jqueryscript.net/demo/Simple-Hierarchical-Organization-Chart-Plugin-For-jQuery-jOrgChart/
Animated Organization Chart & Tree Diagram Plugi 动感的 https://www.jqueryscript.net/demo/Animated-Organization-Chart-Tree-Diagram-Plugin-Stiff-Chart/
NADYTree jQuery Horizontal Tree 竖型树和组织 http://www.mohnady.com/FreeTools/Tree
Nestable是一个jQuery的树视图插件使用拖放功能来重新排列顺序https://dbushell.com/Nestable/
用js简单绘制杜邦图 http://blog.csdn.net/u011498933/article/details/78260073

 

 

甘特图

taitems/jQuery.Gantt 甘特图 http://taitems.github.io/jQuery.Gantt/, 下载:https://github.com/taitems/jQuery.Gantt
robicch/jQueryGantt https://github.com/robicch/jQueryGantt
采用纯Html/Javascript实现的几个甘特图  http://www.open-open.com/home/space-668-do-blog-id-787.html
Dashboards by Keen IO
10 jQuery Gantt Chart Tools 10甘特图 http://pulse2.com/r/jquery-gantt-chart/
http://www.cnblogs.com/lhb25/p/responsive-dashboard-templates-bootstrap.html
Gantt 编辑器 jQueryGantt http://www.oschina.net/p/jquerygantt

其他：

css3鼠标划过图片散开特效 http://www.phplearn.cn/dshare/info_1837.html
CSS 动画图标集 hamburgers https://jonsuh.com/hamburgers/
旋转插件jQueryRotate: http://jqueryrotate.com/, 一些中文说明: http://www.css88.com/archives/4519, http://www.dowebok.com/72.html
jQuery fsBanner 手风琴 https://github.com/fiote/fsbanner

Line Maker一个插件用于你的网站上创建具有动画效果的装饰线。 这个插件显示了添加各种各样的线条简单的方法有不同的厚度和颜色,在垂直或水平方向,和动画。 http://tympanus.net/codrops/2016/10/12/animated-decorative-lines/

Echo.js,  Lazyr.js – 延迟加载图片 – 简单易用的图片延迟加载插件
imagesLoaded – 检测网页中的图片是否加载完成
https://my.oschina.net/u/3208730/blog/875824

魔幻线条　https://github.com/AlloyTeam/curvejs