html5動效系列十四：jQuery儀表盤指示器動畫插件 6種儀表樣式

2015-5-19    藍(lán)藍(lán)設(shè)計的小編


藍(lán)藍(lán)設(shè)計( yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

每一個扁平化界面設(shè)計，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計

來源：http://www.html5tricks.com/jquery-dashboard-animation.html

 如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

今天我們要來分享一組很酷的jQuery插件，這款jQuery插件實(shí)現(xiàn)了6組不同樣式的超酷儀表盤指示器動畫。儀表盤的背景是一張圖片，通過jQuery來動態(tài)生成一些屬性標(biāo)簽，比如儀表盤的刻度和指針等。效果非常不錯。

jquery-dashboard-animation

在線演示源碼下載

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

在線演示源碼下載

 

日歷

鏈接

個人資料

存檔