获取不断变化的元素的位置

我试图做出一种背景，其中一些云在移动，但是当我得到云移动后，我发现我应该让它们停止并在达到浏览器的最大宽度时返回，或让它们消失。我试图得到他们的位置，但我无法动态地获得所有职位。现在，（为简单起见）我只使用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

来源

2009-06-09 Tsundoku

我觉得这个代码将是u.Try这一点很有用！

$('.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-09 14:25:41

为什么不使用循环背景图像和修改背景位置的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事件监听器s支持

来源

2009-06-09 07:40:08

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

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

另外，我不认为循环将不断完善。在迭代过程中，这些变量的值都没有改变，所以它没有结束。为了使其工作，您需要在每次迭代中修改（更新）循环内的'p'变量。

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

来源

2009-06-09 07:44:01 James

如何：

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

来源

2009-06-09 07:56:02 Stobor

有一个在测试在每个迭代上的宽度是没有意义的;我认为它不会改变... – James 2009-06-09 07:56:53

可靠地做到这一点，唯一的办法就是监听DOM元素属性更改，使用突变事件DOMAttrModified（为前。）以及对IE专有的“onpropertychange”。

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

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

来源

2009-06-09 08:43:02

把它所有的功能，比方说moveCloud（）

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

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

- 如果它是maxwidth，它移动到左侧，直至达到0

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

来源

2009-06-09 13:21:11 Olivvv

获取不断变化的元素的位置

回答

相关问题