jQuery儀表盤指示器動畫插件 6種儀表樣式

土豆網同步更新：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);