2012-07-17 16 views
5

Sıcaklığı, nemi, rüzgar hızını, rüzgar yönünü vb. Göstermem gereken bir web uygulamasında çalışıyorum. Başka şeyler göstermek için google.visualization.Gauge() kullanıyorum ama Bir pusulada rüzgar yönünü göstermek istiyorum. Bir web sitesi/webapp için kullanabileceğim herhangi bir (jQuery/javascript/etc) pusulayı bilen var mı? TeşekkürlerBir pusula üzerinde rüzgar yönünü gösterme

+1

nasıl bilemez CSS? Diğer her şey çevreden algılanabilir, bilgisayarınızın içinde bir pusula olması gerekir. – sachleen

+0

@ Kris.Mitchell [Pusula için iOS cihaz API'sı] (http://tripleodeon.com/2011/10/taking-a-new-device-api-for-a-spin/) [demo] (http: // jamesgpearce.github.com/compios5/) – sachleen

+0

@sachleen Ya da sadece karşı karşıya olduğunuz yöne göre değil, görselleştirme amaçlıdır. Rüzgâr hala güneydoğuda, örneğin doğuya veya kuzeye baksanız da. –

cevap

5

İşte benim yaklaşımım sadece CSS kullanıyor. İğneyi döndürmek için dönüşümler kullanır. DEMOjQuery Rotate eklentisini de kullanabilirsiniz.

HTML

<div id="compass"> 
    <div id="arrow"></div> 
</div>​ 

oturuyorum hangi yolu

#compass { 
    width: 380px; 
    height: 380px; 
    background-image:url('http://i.imgur.com/44nyA.jpg'); 
    position: relative; 
} 
#arrow { 
    width: 360px; 
    height: 20px; 
    background-color:#F00; 
    position: absolute; 
    top: 180px; 
    left: 10px; 
    -webkit-transform:rotate(120deg); 
    -moz-transform:rotate(120deg); 
    -o-transform:rotate(120deg); 
    -ms-transform:rotate(120deg); 

    -moz-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

#compass:hover #arrow { 
    -webkit-transform:rotate(0deg); 
    -moz-transform:rotate(0deg); 
    -o-transform:rotate(0deg); 
    -ms-transform:rotate(0deg); 
}​ 
1

HTML5 ve Canvas'ı bununla ilgili kısa bir çalışma yapacağız.

http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm

Sadece şahsen ben hala bir javascript kütüphanesine sopa ediyorum, tamlığı için buraya post ediyorum.

+0

Buraya arama ölçeri oluşturmanın bir yolunu arayanlara not edin. Lütfen HTML5 yanıtımı buraya bakın [http://stackoverflow.com/questions/36236814](http://stackoverflow.com/questions/ 36236814/rüzgar yönü-on-a-pusula-Wunderground/36242222 # 36242222) – Roberto