4

我正在设计一个在背景中有移动云的网页。我的代码使用 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），它初始化 div 并使用setInterval. 在间隔函数moveCloud中，我调用将 div 向左移动一个像素的函数。请参阅上面的代码。

我的问题是它只移动了一个 div。我读过同时使用多个间隔应该没问题。

代码有什么问题？

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