我想使用循環將元素向左移動

我敢打賭，我有一個基本問題，但我無法解決它兩個晚上。我有1個「ul」元素，我只希望它每移動一點像素。向左2秒。我希望他能像這樣一步步地移動，然後回到原來的位置並開始移動。我被困住了，我的劇本只把它移動到最後的位置並完成。我想使用循環將元素向左移動

window.onload = function moveUl(){ 
var eUl = document.getElementById('change'); 
var eLi = eUl.getElementsByTagName('li'); 
x = -300; 

function move(){ 
    for(i=0;i< eLi.length;i++){ 
     eUl.style.marginLeft = i*x+'px'; 
    } 
} 
setInterval(move,1000); 
}

這是我能想到的最簡單的。我知道這個腳本在1秒後執行整個循環，但我試圖做這樣的事情：將這個元素移到左邊，等待，向左移動等等。

來源

2008-12-16 Adriana

你的意思是這樣嗎？

window.onload = function moveUl() 
{ 
    var eUl = document.getElementById('change'); 
    var eLi = eUl.getElementsByTagName('li'); 

    var delta = 0; 
    function move() 
    { 
     for(i=0;i< eLi.length;i++) 
      eUl.style.marginLeft = (-300*i+delta)+'px'; 
     delta -= 100; // Prepares for the next step 
     if (delta == -1000) 
      delta = 0; // Resets after 10 steps 
    } 
    setInterval(move,1000); 
}

來源

2008-12-16 23:57:47

問題是你無法從你開始的地方回去？

爲什麼不只是增加一個新的for循環中移動

for(i=eLi.length; i>0 ;i--){ 
     eUl.style.marginLeft = i*x+'px'; 
    }

你也希望它循環永遠即開始 - >左轉 - >開始 - >左，再？

來源

2008-12-16 23:48:17 hhafez

如果你想讓它滑動，你必須每次迭代超時。嘗試編寫一個只執行一次轉換的函數，然後每10毫秒調用一次該函數。您還可以查看一個Javascript庫，如jQuery，它爲移動提供了一個很好的API。

來源

2008-12-16 23:54:38 Josh

我想使用循環將元素向左移動

回答

相關問題