4

我在这里想要实现的是读取陀螺仪的 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>

所以这里应该发生的是，当我将 iPhone 沿 y 轴（向左）倾斜到 -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"})
    }
}

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

4

1 回答 1

1

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

gamma = Math.round(event.beta);
于 2012-10-22T01:56:33.163 回答