jQuery仪表盘指示器动画插件 6种仪表样式

土豆网同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/ 使用HTML 创建Mac OS App 视频教程。 官方QQ群: (1)App实践出真知4

土豆网同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/

 

使用HTML 创建Mac OS App 视频教程。

官方QQ群:

(1)App实践出真知 434558944

(2)App学习交流 452180823

 

百度网盘同步：http://pan.baidu.com/s/1jG1Q58M

分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS

 

 

今天我们要来分享一组很酷的 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 examplesvar 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 20Hzvar 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);