4

背景に雲が動く Web ページをデザインしています。私のコードはjQueryを使用しており、次のようになります。

browserWidth = 0;
browserHeight = 0;
clouds = 4; 
cloudSpeed = 50;

$(function() {  
    browserWidth = $(window).width();
    browserHeight =  $(window).height();

    for(i = 0; i < clouds; i++) {
        createCloud(cloudSpeed);
    }
});

function moveCloud(cloud) {
    offset = cloud.offset();
    posX = offset.left;
    posX--;

    if(posX < -250) {
        posX = browserWidth;
    }

    cloud.offset({
        left: posX
    });
}

function createCloud(speed) {
    posY = Math.floor(Math.random() * (browserHeight / 2.5));
    posX = Math.floor(Math.random() * (browserWidth - 255));

    cloud = $("<div></div>").addClass("cloud").appendTo("body").offset({
        top: posY,
        left: posX
    });

    setInterval(function() {
        moveCloud(cloud);
    }, speed);
}

基本的には、createCloud関数を使用して、div を初期化し、setInterval. moveCloud間隔関数では、div を 1 ピクセル左に移動する関数を呼び出します。上記のコードを参照してください。

私の問題は、divの1つだけを移動することです。複数の間隔を同時に使用しても問題ないはずだと読みました。

コードの何が問題になっていますか?

4

3 に答える 3

8

問題は、グローバルcloud.

var宣言の前に追加します:

var cloud = $("<div></div>").addClass("cloud").appendTo("body").offset({

varキーワードを使用しない場合は、変数をグローバルにします。

于 2013-04-05T17:44:19.580 に答える
3

cloudローカル変数として宣言していませんが、グローバル コンテキストで宣言しています。詳細については、http ://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3 を参照してください。

于 2013-04-05T17:45:06.117 に答える
1

まず第一に、あなたの質問は素晴らしいです.第二に、これはあなたのアニメーションを微調整しているので、あなたの質問に対する答えではありません.
雲にさまざまな不透明度のレイヤーを追加し、アニメーション速度の間隔を増やしてより現実的にし (近くの雲は遠くの雲よりも速く移動します)、雲のランダムなサイズを生成しました。コードは次のとおりです (純粋な JavaScript):

var clouds = 4,
    cloudSpeed = 20,
    browserWidth = window.innerWidth,
    browserHeight = window.innerHeight,
    int = 5;

for (i = 0; i < clouds; i++) {
    createCloud(cloudSpeed, i, int);
}


function moveCloud(cloud) {
    var posX = (cloud.offsetLeft < -250) ? browserWidth : cloud.offsetLeft;
    posX--;
    cloud.style.left = posX + "px";
}

function createCloud(speed, index, interval) {
    var posY = Math.floor(Math.random() * (browserHeight / 2.5)),
        posX = Math.floor(Math.random() * (browserWidth - 255)),
        cloud = document.createElement('div'),
        height = h + Math.floor(Math.random() * 40),
        width = w + Math.floor(Math.random() * 40);
    cloud.className = "cloud";
    cloud.innerHTML = svg(width, height);//added svg scalable background, see the demo
    document.getElementsByTagName('body')[0].appendChild(cloud);
    cloud.style.left = posX + "px";
    cloud.style.top = posY + "px";
    cloud.style.opacity = 1 - (index / 10);
    cloud.style.zIndex = (clouds - index) * 100;
    setInterval(function () {
        moveCloud(cloud);
    }, speed + (interval * index));
}

デモ

于 2013-04-05T19:44:18.050 に答える