Question

我正在设计一个在后台移动云的网页。我的代码使用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。我已经读过，可以同时使用多个间隔。

代码出了什么问题？

Answer 1

问题在于您只有一个全局cloud。

在声明前添加var：

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

如果不使用var关键字，则将变量设为全局。

Answer 2

您尚未将cloud声明为局部变量，而是在全局上下文中。有关详细信息，请参阅：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Answer 3

首先你的问题很棒，其次这不是你的问题的答案，而是调整你的动画。
我为云添加了不同的不透明层，增加了动画速度的间隔以使其更逼真（更接近的云移动禁止比远处移动）并生成云的随机大小，这里是代码（纯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));
}

DEMO

同时setIntervals - 只有第一个运行

3 个答案: