獲取不斷變化的元素的位置

我試圖做出一種背景，其中一些雲在移動，但是當我得到雲移動後，我發現我應該讓它們停止並在達到瀏覽器的最大寬度時返回，或讓它們消失。我試圖得到他們的位置，但我無法動態地獲得所有職位。現在，（爲簡單起見）我只使用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

獲取不斷變化的元素的位置

回答

相關問題