JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery仪表盘指示器动画插件 6种仪表样式

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

JQUERY教程  手机阅读
       今天我们要来分享一组很酷的jQuery插件,这款jQuery插件实现了6组不同样式的超酷仪表盘指示器动画。仪表盘的背景是一张图片,通过jQuery来动态生成一些属性标签,比如仪表盘的刻度和指针等。效果非常不错。

在线演示   源码下载

HTML代码:


  1. <span id="airspeed"></span>
  2. <span id="attitude"></span>
  3. <span id="altimeter"></span>
  4. <span id="turn_coordinator"></span>
  5. <span id="heading"></span>
  6. <span id="variometer"></span>
复制代码

JavaScript代码:


  1. // Dynamic examples
  2. var attitude = $.flightIndicator('#attitude', 'attitude', {roll:50, pitch:-20, size:200, showBox : true});
  3. var heading = $.flightIndicator('#heading', 'heading', {heading:150, showBox:true});
  4. var variometer = $.flightIndicator('#variometer', 'variometer', {vario:-5, showBox:true});
  5. var airspeed = $.flightIndicator('#airspeed', 'airspeed', {showBox: false});
  6. var altimeter = $.flightIndicator('#altimeter', 'altimeter');
  7. var turn_coordinator = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {turn:0});

  8. // Update at 20Hz
  9. var increment = 0;
  10. setInterval(function() {
  11.     // Airspeed update
  12.     airspeed.setAirSpeed(80+80*Math.sin(increment/10));

  13.     // Attitude update
  14.     attitude.setRoll(30*Math.sin(increment/10));
  15.     attitude.setPitch(50*Math.sin(increment/20));

  16.     // Altimeter update
  17.     altimeter.setAltitude(10*increment);
  18.     altimeter.setPressure(1000+3*Math.sin(increment/50));
  19.     increment++;

  20.     // TC update
  21.     turn_coordinator.setTurn(30*Math.sin(increment/10));

  22.     // Heading update
  23.     heading.setHeading(increment);

  24.     // Vario update
  25.     variometer.setVario(2*Math.sin(increment/10));

  26. }, 50);
复制代码

via:http://www.html5tricks.com/jquery-dashboard-animation.html

【jQuery仪表盘指示器动画插件 6种仪表样式】相关文章

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

2. Lazy Line Painter – 很有趣的 jQuery 路径动画插件

3. Lazy Line Painter – 很有趣的 jQuery 路径动画插件

4. 让网站动起来的 jQuery 动画插件

5. Velocity – 另外一款加速的 jQuery 动画插件

6. 7个炫酷的jQuery动画插件及源码

7. 14款华丽的最新jQuery焦点图动画插件

8. 10个web前端基于jQuery动画插件及源码

9. 10款华丽最新jQuery焦点图动画插件

10. 8个引人注目的HTML5/jQuery动画插件

本文来源:https://www.51html5.com/a1530.html

点击展开全部
上一篇:2015年4月出炉的 21个免费的 JQuery 前端功能插件 下一篇:jQuery EasyUI 1.4.2 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示 ...

﹝jQuery仪表盘指示器动画插件 6种仪表样式﹞相关内容

「jQuery仪表盘指示器动画插件 6种仪表样式」相关专题

jquery jquery动画 update var
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢