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ことになります。そして、向きがy軸に沿って-27度になるように少し右に傾けると、残りの画像に設定され、設定されます。<img id="img01" class="imgblock" src="images/img01.jpg"/>display:nonedisplay: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

イベントハンドラーの2行目でガンマ値をベータで上書きしているようです。

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