jquery Dashboard Indicator Animation plugin 6 instrument styles

Tudou Sync update : http://www.tudou.com/plcover/VHNh6ZopQ4E/ 

use HTML to create a Mac OS App video tutorial. QQ Group: (1) app practice 434558944 (2) App learning communication 452180823 Baidu Network Disk synchronization:/HTTP pan.baidu.com/s/1jg1q58m sharing [Chinese documentary] Internet era Http://pan.baidu.com/s/1qWkJfcS

 

Today we're going to share a cool set of jquery plugins that enable 6 different styles of cool dashboard indicator animations. The background of the dashboard is a picture that dynamically generates some attribute tags, such as the scale and pointers of the dashboard, through jquery. The effect is very good.

Online Demo Source Download

HTML code:

<SpanId="Airspeed" ></Span><span id= "attitude" ></< Span class= "title" >span><span id=  "altimeter" ></span><< Span class= "title" >span id= "Turn_coordinator" > </span><span id=< Span class= "value" > "heading" ></span><span id= "variometer" ></SPAN>              

JavaScript code:

Dynamic examplesvar attitude = $.flightindicator (' #attitude ',' Attitude ', {roll:pitch:-,Size:Showbox:true});var heading = $.flightindicator (' #heading ',' Heading ', {heading: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 UpdateAirspeed.setairspeed (80+80*math.sin (increment/10)); Attitude updateAttitude.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); Span class= "indent" > //Vario update Variometer.setvario ( 2*math.sin (Increment/10);}, 50);     

 

jquery Dashboard Indicator Animation plugin 6 instrument styles