Question

js的新手并且学到很多东西，但在我的所有研究中，我都无法做到这一点目标：
1：我有image1
2：单击时在image2和image3之间运行setinterval函数，为其设置动画 3：再次点击clearinterval并转到静态图像时。

奖励：静态时无音频，动画时播放音频我陷入了第三步。

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>标签下降似乎不起作用。

Answer 1

这可以解决你的动画问题。

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 );
    }
}

但我有一些你可能想要考虑的建议。

创建动画时，如果使用HTML5或模仿它的函数（如下所示），通常最好使用window.requestAnimationFrame

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

考虑在为图像设置动画之前预先加载图像，或者甚至将所有图像放在同一个文件（精灵）中并更改背景位置。

打开/关闭setInterval动画

1 个答案: