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

 
使用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 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);

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。