2015-5-19 蓝蓝设计的小编
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每一个扁平化界面设计，都是我们的心灵碰撞致力于最棒的 metro ui 设计
来源：http://www.html5tricks.com/jquery-dashboard-animation.html
今天我们要来分享一组很酷的jQuery插件，这款jQuery插件实现了6组不同样式的超酷仪表盘指示器动画。仪表盘的背景是一张图片，通过jQuery来动态生成一些属性标签，比如仪表盘的刻度和指针等。效果非常不错。
HTML代码：
<span id="airspeed"></span> <span id="attitude"></span> <span id="altimeter"></span> <span id="turn_coordinator"></span> <span id="heading"></span> <span id="variometer"></span>
JavaScript代码：
// Dynamic examples
var attitude = $.flightIndicator('#attitude', 'attitude', {roll:50, pitch:-20, size:200, showBox : true});
var heading = $.flightIndicator('#heading', 'heading', {heading:150, showBox:true});
var variometer = $.flightIndicator('#variometer', 'variometer', {vario:-5, showBox:true});
var airspeed = $.flightIndicator('#airspeed', 'airspeed', {showBox: false});
var altimeter = $.flightIndicator('#altimeter', 'altimeter');
var turn_coordinator = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {turn:0});
// Update at 20Hz
var increment = 0;
setInterval(function() {
// Airspeed update
airspeed.setAirSpeed(80+80*Math.sin(increment/10));
// Attitude update
attitude.setRoll(30*Math.sin(increment/10));
attitude.setPitch(50*Math.sin(increment/20));
// Altimeter update
altimeter.setAltitude(10*increment);
altimeter.setPressure(1000+3*Math.sin(increment/50));
increment++;
// TC update
turn_coordinator.setTurn(30*Math.sin(increment/10));
// Heading update
heading.setHeading(increment);
// Vario update
variometer.setVario(2*Math.sin(increment/10));
}, 50);