使用HTML 建立Mac OS App 視頻教程。官方QQ羣:分享 [中文紀錄片]互聯網時代 http://pan.baidu.com/s/1qWkJfcS
今天咱們要來分享一組很酷的 jQuery插件 ,這款 jQuery插件 實現了6組不一樣樣式的超酷儀表盤指示器動畫。儀表盤的背景是一張圖片,經過jQuery來動態生成一些屬性標籤,好比儀表盤的刻度和指針等。效果很是不錯。javascript
HTML代碼:html5
<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代碼:java
// 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);