154 lines
6.5 KiB
HTML
154 lines
6.5 KiB
HTML
<!doctype html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>jQuery高质量飞行仪表指示器插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
|
|
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/default.css">
|
|
<!-- Syntax coloration -->
|
|
<link rel="stylesheet" type="text/css" href="_examples_data/prism/prism.css" />
|
|
<link rel="stylesheet" type="text/css" href="_examples_data/style.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
|
|
</head>
|
|
<body>
|
|
<div class="htmleaf-container">
|
|
<header class="htmleaf-header">
|
|
<h1>jQuery高质量飞行仪表指示器插件 <span>A high quality flight indicators</span></h1>
|
|
<div class="htmleaf-links">
|
|
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
|
|
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Chart/201504211714.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
|
|
</div>
|
|
</header>
|
|
<!--<div class="htmleaf-content bgcolor-3">-->
|
|
<div class="container">
|
|
<!-- First example -->
|
|
<h2>Attitude example</h2>
|
|
<p>This is a simple example showing an attitude indicator with pitch of 3 degrees and roll of 8 degrees. As you can see, the size can be chosen to be as big as you want since we only use vector graphics (svg). For this example size was set to 350 pixels.</p>
|
|
<p><pre><code class="language-javascript">var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:350, roll:8, pitch:3, showBox : true});</code></pre></p>
|
|
|
|
<div class="examples">
|
|
<!-- The block where we want to place an indicator -->
|
|
<span id="first_attitude"></span>
|
|
</div>
|
|
|
|
<!-- Second example -->
|
|
<h2>Realtime indicators</h2>
|
|
<p>This example shows a real time application for each type of indicator.</p>
|
|
<div class="examples">
|
|
<div>
|
|
<span id="airspeed"></span>
|
|
<span id="attitude"></span>
|
|
<span id="altimeter"></span>
|
|
</div><div>
|
|
<span id="turn_coordinator"></span>
|
|
<span id="heading"></span>
|
|
<span id="variometer"></span>
|
|
</div>
|
|
</div>
|
|
<p>The code of this example is quite simple. The html :</p>
|
|
<p><pre><code class="language-javascript">
|
|
<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>
|
|
</code></pre></p>
|
|
|
|
<p>And the javascript :</p>
|
|
<p><pre><code class="language-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);
|
|
</code></pre></p>
|
|
</div>
|
|
<div class="related">
|
|
<h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
|
|
<a href="http://www.htmleaf.com/jQuery/Layout-Interface/201502171389.html">
|
|
<img src="related/1.jpg" width="300" alt="jQuery轻量级圆形进度指示器插件"/>
|
|
<h3>jQuery轻量级圆形进度指示器插件</h3>
|
|
</a>
|
|
<a href="http://www.htmleaf.com/html5/html5-canvas/20141020238.html">
|
|
<img src="related/2.jpg" width="300" alt="html5 canvas+js动态仪表盘插件"/>
|
|
<h3>html5 canvas+js动态仪表盘插件</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Syntax color -->
|
|
<script src="_examples_data/prism/prism.js"></script>
|
|
|
|
<!-- Importing jQuery library -->
|
|
<script src="js/jquery-2.1.0.min.js"></script>
|
|
|
|
<!-- Importing the FlightIndicators library -->
|
|
<script src="js/jquery.flightindicators.js"></script>
|
|
<script type="text/javascript">
|
|
// First static example
|
|
var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:350, roll:8, pitch:3, showBox : true});
|
|
// 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 - note that the TC appears opposite the angle of the attitude indicator, as it mirrors the actual wing up/down position
|
|
turn_coordinator.setTurn((30*Math.sin(increment/10))*-1);
|
|
|
|
// Heading update
|
|
heading.setHeading(increment);
|
|
|
|
// Vario update
|
|
variometer.setVario(2*Math.sin(increment/10));
|
|
}, 50);
|
|
</script>
|
|
</body>
|
|
</html> |