1

我试图制作一种背景，其中一些云正在移动，但在我让云移动后，我发现我应该让它们在达到浏览器的最大宽度时停止并返回，或者让它们消失。我试图获得他们的职位，但我无法动态获得所有职位。现在（为了简单起见）我只使用 1 个云进行测试，我这样做：

$(function () {
    var p = $('.clouds').position();
    var w = $("#sky").width();
    while (p < w);
    $('.clouds', this).stop().animate({ left: "+=50000px" }, { queue: false, duration: 90000 });
});

问题是，那个位置不是动态刷新的，它坚持它获得的第一个位置，我试图将它移动到 while 循环中，但它没有工作......所以我现在有点卡住了。 ..任何人都知道我该如何实现这一目标？云的图像原来设置在top:0 left:0

4

6 回答 6

1

为什么不使用循环背景图像并修改背景位置 css 属性？

编辑：我不知道是否有一个 jquery 插件可以自动执行此操作，但在带有 setInterval 和模数的老式 javascript 中应该很容易。

例如，您的背景图像是 400 像素宽，CSS 将是：

body { 
    background: transparent url(yourbackground.png) repeat-x scroll 0 0;
}

和 javascript 将是：

var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    $('body').css("background-position", (-1 * BGPosition) + "px 0px");
}

var si = setInterval(scrollBodyBG,100)

编辑：测试和工作（没有jquery）作为

var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    document.body.style.backgroundPosition = (-1 * BGPosition) + "px 0px";
}

document.addEventListener("DOMContentLoaded",function() { setInterval(scrollBodyBG,100);},false);

显然这需要改变 IE 事件监听器支持

于 2009-06-09T07:40:08.753 回答
1

您发布的代码是您正在使用的代码的直接副本吗？如果是这样，那么对 animate 的调用不包含在 while 循环中，因为它被分号缩短了。尝试使用花括号；它使维护和查看变得更加容易。:)

while(p < w) {
     $('.clouds',this).stop().animate({left:"+=50000px"},{queue:false, duration:90000});
}

另外，我认为这个循环永远不会完成。这些变量的值都没有在迭代过程中发生变化，因此它永无止境。为了使其工作，您需要在每次迭代时修改（更新）循环内的“p”变量。

编辑：实际上，从头开始，循环甚至不会开始，因为elem.position()返回一个对象，而不是一个数字（NaN）。要使其工作，您需要elem.position().left.

于 2009-06-09T07:44:01.850 回答
1

我认为这段代码对你有用。试试这个！

$('.clouds').animate({ top: 0 }, { queue: false, duration: 90000 });

setInterval(function () {
    if ($(".clouds").position().top == 0) alert("Rain");
}, 5000);

每 5 秒，它会检查“云”类的位置，如果它为零，它会发出警报！

对于多个云，您可以使用以下代码

setInterval(function () {
    if ($(".clouds").position().top == 0) {
        $(".clouds").each(function () {
            if ($(this).position().top == 0) $(this).remove();
        });
    }
}, 1000)
于 2009-06-09T14:25:41.647 回答
0

怎么样：

 while($('.clouds').position().left < $("#sky").width())
 {
       // do stuff
 }
于 2009-06-09T07:56:02.543 回答
0

可靠地做到这一点的唯一方法是监听 DOM 元素的属性更改，使用突变事件 DOMAttrModified（例如）和 IE 上的专有“onpropertychange”。

有人将此移植到 Jquery，这是文章。

http://www.west-wind.com/Weblog/posts/453942.aspx

于 2009-06-09T08:43:02.713 回答
0

把它全部放在一个函数中，比如说 moveCloud()

然后使用动画位置的回调并调用该函数。在函数开始时检查云的位置：

- 如果为 0 则向右移动直到达到 maxwidth

- 如果是maxwidth，则向左移动，直到达到0

动画完成后，回调执行并再次调用该函数，这会将云移动到屏幕的另一侧。

于 2009-06-09T13:21:11.870 回答