今日の人気記事

まだデータがありません。

航空機の計器をWeb上に実装「Flight Indicators」

当ページのリンクには広告が含まれています。

スポンサーリンク

航空機の計器をWeb上に実装するプラグイン「Flight Indicators」を紹介します。

Flight Indicators

このプラグインを使えば、「姿勢指示計」「方位計」「昇降計」「高度計」といった航空機の計器をWeb上に実装することができます。

CSSスタイルシートとSVGファイルまで用意してくれているので、簡単に実装することができます。マニアックなプラグインですが、おもしろいですね。

スポンサーリンク

デモの航空機計器をご覧ください。

「Flight Indicators」のデモ

ソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Flight Indicatorsのデモでーす。">
<title>Flight Indicators - jQuery Plugin Demo</title>
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
</head>
<body>
<h1>Flight Indicators のデモでーす。</h1>
<div>
  <span id="attitude"></span>
  <span id="heading"></span>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/jquery.flightindicators.js"></script>
<script>
var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:350, roll:8, pitch:3, showBox : true});
var attitude = $.flightIndicator('#attitude', 'attitude', {roll:50, pitch:-20, size:200, showBox : true});
var heading = $.flightIndicator('#heading', 'heading', {heading:150, showBox:true});

var increment = 0;
setInterval(function() {
  attitude.setRoll(30*Math.sin(increment/10));
  attitude.setPitch(50*Math.sin(increment/20));
  heading.setHeading(increment);
  increment++;
}, 50);
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)