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 ループ (常に true) がホール システムをブロックしているように見えます (ただし、画像の変化は見られません)。また、ブラウザでのデバッグ中にエラー メッセージが表示されません。また、写真をプリロードしようとしましたが (コードは上に掲載されていません)、それでも機能しませんでした。

このコードは、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ミリ秒程度ですか？2つ目は、「真」ではなく真を使用することです。違いがわかりますか？:)そして最後の、しかし最も重要なこと-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 に答える