0

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

奖励：静态时没有音频，动画时播放音频。
我在第三步被抓住了。

点击功能

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.requestAnimationFrame如果您使用 HTML5 或模仿它的函数，通常会更好（像这样：）

    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 回答