利用 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"/>并display:none到其余图像。如果我将其向右倾斜一点，使得方向现在沿 y 轴为 -27 度，display:block 将设置为 <img id="img02" class="imgblock" src="images/img02.jpg"/> 并将display:none设置为其余图像。

我对此进行了一些研究，并在这里偶然发现了一篇精彩的文章，但不太确定如何将代码实现到我的代码中。我尝试以这种方式实现它，但它不起作用：

window.ondeviceorientation = function(event) {
    gamma = Math.round(event.gamma);    
    gamma = Math.round(event.beta); 
    if (gamma = -45){
        $("#img01").css({"display":"block"});
        $("#img02, #img03, #img04, #img05").css({"display":"none"})
    } elseif (gamma = -27) {
        $("#img02").css({"display":"block"});
        $("#img01, #img03, #img04, #img05").css({"display":"none"})
    }
}

我很确定我在上面的某个地方搞砸了。任何帮助将不胜感激。

Answer 1

您似乎正在事件处理程序的第二行中使用 beta 覆盖您的 gamma 值：

gamma = Math.round(event.beta);