0

我有这个代码：

var run_anim = "";
var anim_array = ["\animations\pic_1.gif",
                  "\animations\pic_2.gif",
                  "\animations\pic_3.gif",
                  "\animations\pic_4.gif"]

function changeBackgroundURL(elementId, backgroundURL){
    run_anim = "false";
    document.getElementById(elementId).style.background=backgroundURL;
}

function mouseover_anim(elementName){
    run_anim = "true";
    changeBackgroundURL(elementName,anim_array[0]);
    while(run_anim=="true"){
        setTimeout(function(){changeBackgroundURL(elementName,anim_array[1]) parameter = null},30);
        setTimeout(function(){changeBackgroundURL(elementName,anim_array[2]) parameter = null},40);
        setTimeout(function(){changeBackgroundURL(elementName,anim_array[3]) parameter = null},20); 
    }
}

我正在运行这条线：

<area shape="rect" coords="0,0,95,91"
            onMouseOver="mouseover_anim('div_1')" 
            onMouseOut="changeBackground('div_1', 'pic_static.gif')">

当我运行它时，应用程序会占用大量 CPU，我需要关闭浏览器。看起来while循环（总是如此）阻塞了孔系统（但我没有看到任何图片变化）。在浏览器中调试时，我也看不到任何错误消息。我也尝试过预加载图片（代码未在上面发布），但它仍然无法正常工作。

该代码仅在我禁用 while 循环并设置更长的超时时才有效，如下所示：

function mouseover_anim(elementName){
    changeBackgroundURL(elementName,anim_array[0]);
    setTimeout(function(){changeBackgroundURL(elementName,anim_array[1]) parameter = null},300);
    setTimeout(function(){changeBackgroundURL(elementName,anim_array[2]) parameter = null},400);
    setTimeout(function(){changeBackgroundURL(elementName,anim_array[3]) parameter = null},200); 
}

那么用Javascript创建循环动画和/或快速动画是不可能的吗？或者你有什么建议吗？

4

2 回答 2

1

@alfasin 如果@Marcus 希望它是一个快速动画，3 秒超时太多了，所以可能大约 100 毫秒？第二件事——使用真实，而不是“真实”——你能看出区别吗？:) 最后也是最重要的一点 - 使用 setInterval 每 n 毫秒调用一次你的函数，你不会遇到浏览器崩溃的问题（当然你需要记住 clearInterval，否则它会无休止地运行

由于我有空闲时间，这是几乎完整的代码：

var intervalId = setInterval(function() {
    // do your stuff here

    // write condition, that when satisfied clears this interval
    //clearInterval(intervalId);
}, 100);
于 2013-01-28T18:49:19.653 回答
0

这是它为我工作的方式（我更改了图像名称/路径并在 FF & chrome 上本地测试）：

<html>
<head>
 <style type="text/css">  
    div {  
        position: absolute;
        left:   200px;
        top:    200px;
        width:  800px;  
        height: 900px;  
        style: "background: url(\"1.jpg\")";
    }  
</style> 
<script type="text/javascript">
var anim_array = ["url(\"1.jpg\")",
                  "url(\"2.jpg\")",
                  "url(\"3.jpg\")",
                  "url(\"4.jpg\")"]

function changeBackgroundURL(backgroundURL){
    document.getElementById("1").style.backgroundImage = backgroundURL;
}

function mouseover_anim(){
    var bg = document.getElementById("1").style.backgroundImage;
    if(bg === anim_array[0] || bg === ""){
        bg = anim_array[1];
    }
    else if(bg === anim_array[1]){
        bg = anim_array[2];
    }
    else if(bg === anim_array[2]){
        bg = anim_array[3];
    }
    else if(bg === anim_array[3]){
        bg = anim_array[0];
    }
    changeBackgroundURL(bg);    
}

</script>
</head>
<body>
    <div id="1"></div>
    <img src ="1.jpg" width="145" height="126" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" id="1" coords="0,0,200,200" onMouseOver="setTimeout(mouseover_anim,3000);" >
    </map>
</body>
</html>
于 2013-01-28T21:37:35.410 回答