html5仪表盘效果,html5动效系列十四：jQuery仪表盘指示器动画插件6种仪表样式...

每一个扁平化界面设计&＃xff0c;都是我们的心灵碰撞致力于最棒的 metro ui 设计

今天我们要来分享一组很酷的

HTML代码&＃xff1a;

Javascript代码&＃xff1a;

// Dynamic examples

var attitude &＃61; $.flightIndicator(&＃39;#attitude&＃39;, &＃39;attitude&＃39;, {roll:50, pitch:-20, size:200, showBox : true});

var heading &＃61; $.flightIndicator(&＃39;#heading&＃39;, &＃39;heading&＃39;, {heading:150, showBox:true});

var variometer &＃61; $.flightIndicator(&＃39;#variometer&＃39;, &＃39;variometer&＃39;, {vario:-5, showBox:true});

var airspeed &＃61; $.flightIndicator(&＃39;#airspeed&＃39;, &＃39;airspeed&＃39;, {showBox: false});

var altimeter &＃61; $.flightIndicator(&＃39;#altimeter&＃39;, &＃39;altimeter&＃39;);

var turn_coordinator &＃61; $.flightIndicator(&＃39;#turn_coordinator&＃39;, &＃39;turn_coordinator&＃39;, {turn:0});

// Update at 20Hz

var increment &＃61; 0;

setInterval(function() {

// Airspeed update

airspeed.setAirSpeed(80&＃43;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&＃43;3*Math.sin(increment/50));

increment&＃43;&＃43;;

// 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);

您可以选择一种方式赞助本站支付宝转账赞助

分享到各大网站