使用过的一些前端工具

在线工具

• JsFiddle

用于在线演示和调试前端项目

访问地址：http://jsfiddle.net/

• CodePen

与JsFiddle类似，在国内访问速度比JsFiddle要快，JsFiddle经常被墙，需要FQ才能访问

访问地址：http://codepen.io/

CSS框架或工具

• BootStrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

访问地址：http://getbootstrap.com/

中文地址：http://www.bootcss.com/

图表工具

• D3.js

用于将数据映射到网页上通过各种图形呈现。同时定义了很多API来操纵SVG，可以编写出很炫的效果来

访问地址：http://d3js.org/

中文资料：http://www.pkuwwt.tk/d3-tutorial-cn/about.html

• chart.js

一个十分轻量级的图表工具

访问地址：http://www.chartjs.org/

• HighCharts

一个功能比较强大的图表工具，支持svg，canvas

访问地址：http://www.highcharts.com/

• Protovis

可以快速的构建图表，主要生成的是SVG动画，与D3有一定的区别

访问地址：http://mbostock.github.io/protovis/

• ECharts

一个基于Canvas的图表工具，提供拖拽计算，大数据等功能，有详细的中文文档，出自百度前端团队

访问地址：http://echarts.baidu.com/index.html

 

JavaScript动画工具

• Velocity.js

使用JavaScript来定义动画，性能与Css的transition和animate相当，但是更加灵活，使用上与jQuery的animate方法类似

访问地址：http://greensock.com/gsap

• GSAP

功能很多，性能也不错，但是使用上有版权限制

访问地址：http://julian.com/research/velocity/

SVG Canvas工具

• Raphael

可以同时生成SVG和VML格式的矢量元素

访问地址：http://raphaeljs.com/

• Processing

可以通过Canvas绘制图形，提供了一些回调函数方便生成帧动画

访问地址：https://processing.org/

• Snap.svg

用于生成svg，与Raphael类似，不过不支持vml，但是在使用上比Raphael方便

访问地址：http://snapsvg.io/

• Three.js

通过Canvas展示3d模型

访问地址：http://threejs.org/

轮播图片类插件

• OWL Carousel

支持触摸事件，响应式的图片轮播插件，支持单个图片和多个图片轮播

访问地址：http://owlgraphic.com/owlcarousel/

• SuperSlide

由国人编写，使用上比较符合国内网站的习惯，集成了“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”，等多种效果

访问地址：http://www.superslide2.com/

• Jssor Slider

看上去是一个功能比较多的插件，支持多种图片切换效果，但是使用上比较复杂

访问地址：http://www.jssor.com/

• Basic jQuery Slider

一个很轻量级的轮播插件，功能上比较单一，默认只支持单个图片的轮播，但是使用很简单，样式上也比较容易定制

访问地址：http://www.basic-slider.com/