0

jsが初めてで、多くのことを学んでいますが、私のすべての調査では、これを正しく理解できません。
目標:
1: image1 があり
ます 2: クリックすると、image2 と image3 の間で setinterval 関数が実行され、アニメーション化されます。
3: もう一度 clearinterval をクリックすると、静止画像に移動します1。

おまけ: 静止時は音声なし、アニメーション時は音声を再生。
三段目で捕まる。

onclick 関数

function clickio() 
{
 element=document.getElementById('myimage')
 if (element.src.match("image2.png","image3.png"))
   {
   clearInterval("animate()");
   element.src="image1.png";
   audiofile.pause();
   }
 else
   {
   audiofile.play();
   setInterval("animate()", 500)
   }
}

アニメーション機能

function startfire()
{
 element=document.getElementById('myimage')
 if (element.src.match("flame1.png"))
   {
   element.src="flame2.png";
   }
 else
   {
   element.src="flame1.png";
   }
}

例: Audibreeze

別の問題は、さまざまなブラウザを介してオーディオを再生することです。
HTML5 タグを使用しましたが、機能していないように見えるタグに<audio>落ちました。<embed>

4

1 に答える 1

0

これでアニメーションの問題が解決するはずです。

var animInterval = null;

var clickio = function( event ){
    var element = document.getElementById( 'myimage' );
    if( interval ){
        clearInterval( animInterval );
        element.src = "image1.png";
        audiofile.pause();
    }
    else{
        audiofile.play();
        animInterval = setInterval( startfire , 500 );
    }
}

しかし、考慮に入れたいかもしれないいくつかの提案があります。

  1. アニメーションを作成するときは、通常、window.requestAnimationFrameHTML5 またはそれを模倣する関数を使用する場合に使用することをお勧めします (このように:)

    window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

  2. アニメーション化する前に画像をプリロードするか、すべての画像を同じファイル (スプライト) に入れて背景位置を変更することを検討してください。

于 2013-05-04T22:04:27.480 に答える