iPhoneのジャイロスコープ値を使ってHTML要素を制御する

Question

私がここで達成しようとしているのは、ジャイロスコープのy軸値を読み取り、それを使ってHTMLの一部の画像のCSSを制御することです。

だから/ CSS私のHTMLは次のようになります。

<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軸に沿って-45度にiPhoneを傾けたときに、イメージの残りの部分に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は残りの画像に設定されます。

私はこれに関するいくつかの調査を行い、華麗な記事hereを見つけましたが、私のコードをどのように実装するかについてはあまりよく分かりません。私は、このようにそれを実装しようとしたが、それは動作していない：

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

あなたのイベントハンドラの2行目のベータ版を使用してガンマ値を上書きしている表示されます。

gamma = Math.round(event.beta);