0

背景画像を作成しましたが、小さなJavaScriptコードを使用すると、右から左に移動します。

HTMLコード

<div id="clouds_image"></div>

Javascriptコード

var g=0;
var speed=30;
function rollClouds() {
document.getElementById('clouds_image').style.backgroundPosition=g+'px 0';
g--;
scroller=setTimeout(function(){rollClouds()},speed);
}
window.addEventListener?
window.addEventListener('load',rollClouds,false):
window.attachEvent('onload',rollClouds);

しかし、時間の経過とともにPCのCPUメモリ使用量が増加することに気づきました。私のPCに過負荷を引き起こし、そのjavascriptコードを無効にすると、通常の状態に戻ります。

私の質問

だから私はこのjavascriptコードを変更して永遠に機能し続けないようにする必要があると思いますgだからどんな助けでも〜ありがとう。

4

2 に答える 2

1

よりクリーンな解決策は、jQueryを使用して背景を移動することです。

function moveClouds() {
    $("#clouds_image").css({left:"-2000px"});
    $("#clouds_image").animate({left:"2000px"},10000);
}

次に、xミリ秒ごとにトリガーする間隔を設定できます。

setInterval(moveClouds,10000)

JSFiddleはここにあります：http：//jsfiddle.net/qXpVX/

于 2013-02-16T11:40:37.440 に答える
1

その関数が実行された回数をカウントするには変数を使用する必要があり、setTimeoutの代わりにsetIntervalを使用する必要があります。例を参照してください

http://jsfiddle.net/EQDjx/206/ （私のカウンターは100から始まり、0まで下がります）

より良い効果を得るために、jqueryを使用することをお勧めします。アニメーション関数 http://api.jquery.com/animate/を参照してください

var g = 1000;
var speed=300;
var counter = 100;
function rollClouds() {
document.getElementById('clouds_image').style.backgroundPosition=g+'px 0';
g--;
if (counter < 1) clearInterval(interval);
}
interval = setInterval(function(){rollClouds()}, speed)
于 2013-02-16T11:46:16.940 に答える