Question

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

$(function(){

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

});

事实是，这个位置没有动态刷新，它坚持第一个它得到了我试图在while循环中移动它但它没有用...所以我有点卡在那一刻......任何人都知道如何实现这一目标？云的图像最初设置在顶部：0左：0

Answer 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事件监听器支持

Answer 2

您发布的代码是否直接复制了您正在使用的内容？如果是这样，那么对动画的调用不会包含在while循环中，因为它会被分号缩短。尝试使用花括号;它使维护和查看更容易。：）

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

另外，我认为循环不会完成。这些变量的值在迭代期间都没有变化，所以它永远不会结束。为了使它工作，你需要在每次迭代时修改（更新）循环中的'p'变量。

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

Answer 3

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

$('.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)

Answer 4

怎么样：

 while($('.clouds').position().left < $("#sky").width())
 {
       // do stuff
 }

Answer 5

可靠地执行此操作的唯一方法是使用突变事件DOMAttrModified（例如）和IE上的专有“onpropertychange”来侦听DOM元素的属性更改。

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

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

Answer 6

把它全部放在一个函数中，让我们说一下moveCloud（）

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

- 如果为0则向右移动直到达到最大宽度

- 如果是最大宽度，请将其向左移动直至达到0

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

获取元素的位置不断变化

6 个答案: