利用iPhone的陀螺仪值来控制HTML元素

Question

我在这里想要实现的是读取陀螺仪的y轴值，并使用它来控制HTML中某些图像的CSS。

所以我的HTML / CSS看起来如下：

<style>
    .imgblock{
         display:none;
    }
</style>

<div id="images">
   <img id="img01" class="imgblock" src="images/img01.jpg"/>
   <img id="img02" class="imgblock" src="images/img02.jpg"/>
   <img id="img03" class="imgblock" src="images/img03.jpg"/>
   <img id="img04" class="imgblock" src="images/img04.jpg"/>
   <img id="img05" class="imgblock" src="images/img05.jpg"/>
</div>

所以这里应该发生的是当我沿着y轴（向左）将iPhone倾斜到-45度时，假设将display:block设置为<img id="img01" class="imgblock" src="images/img01.jpg"/>和{ {1}}到其他图像。如果我向右倾斜一点，使得方向现在沿-y轴为-27度，display:none将设置为display:block，<img id="img02" class="imgblock" src="images/img02.jpg"/>将设置为其余的图像。

我已经对此进行了一些研究，并且发现了一篇精彩的文章here，但我不太确定如何将代码实施到我的文章中。我试过这种方式实现它，但它不起作用：

display:none

我很确定我在上面的某个地方搞砸了。非常感谢任何帮助。

Answer 1

看来你在事件处理程序的第二行用beta覆盖你的gamma值：

gamma = Math.round(event.beta);