我正在开发一个网络应用程序,我必须在其中显示温度、湿度、风速、风向等。我正在使用 google.visualization.Gauge() 来显示其他内容,但我想在罗盘。有谁知道我可以用于网站/网络应用程序的任何(jQuery/javascript/等)指南针? 谢谢
最佳答案
这是我仅使用 CSS 的方法。使用变换来旋转针。 DEMO您还可以使用 jQuery Rotate插件。
HTML
<div id="compass">
<div id="arrow"></div>
</div>
CSS
#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);
}
关于javascript - 如何在指南针上显示风向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11526277/