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

2015-5-19    蓝蓝


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

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

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

 如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

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

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

在线演示源码下载

 

分享本文至：
« 平衡的智慧！如何把握登录界面易用与安全的平衡 html5动效系列十三：绝对震撼，7款HTML5动画集锦下载 »

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档