代码拉取完成，页面将自动刷新
<!--
jQuery Flight Indicators plugin
By Sébastien Matton ([email protected])
Published under GPLv3 License.
https://github.com/sebmatton/jQuery-Flight-Indicators
-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Syntax coloration -->
<link rel="stylesheet" type="text/css" href="_examples_data/prism/prism.css" />
<!-- This page style -->
<link rel="stylesheet" type="text/css" href="_examples_data/style.css" />
<!-- Flight Indicators library styles -->
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
<title>jQuery Flight Indicators Plugin</title>
</head>
<body>
<div class="container">
<!-- Introduction -->
<h1>Flight Indicators jQuery Plugin</h1>
<p>The Flight Indicators Plugin allows you to display high quality flight indicators using html, css3, jQuery and SVG images. The methods make customization and real time implementation really easy. Further, since all the images are vector svg you can resize the indicators to your application without any quality loss ! </p>
<p>This project is hosted on Github : <a href="https://github.com/sebmatton/jQuery-Flight-Indicators">https://github.com/sebmatton/jQuery-Flight-Indicators</a></p>
<!-- 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>
<footer>
jQuery Flight Indicator plugin by Sébastien Matton - License GPLv3<br/>
Turn Coordinator SVG from <a title="By Mysid [CC-BY-SA-3.0 (https://creativecommons.org/licenses/by-sa/3.0) or GFDL (https://www.gnu.org/licenses/fdl-1.3.html)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ATurn_coordinator.svg">Wikimedia Commons</a>
</footer>
<!-- Syntax color -->
<script src="_examples_data/prism/prism.js"></script>
<!-- Importing jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Importing the FlightIndicators library -->
<script src="js/jquery.flightindicators.js"></script>
<!-- Let start our scripts -->
<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: true});
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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手