Question

我打赌我有基本的问题，但我无法解决它两个晚上。我有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秒后执行整个循环，但我尝试做这样的事情：将此元素向左移动，等待，向左移动更多，依此类推。

Answer 1

如果要滑动，则必须在每次迭代时超时。尝试编写一个单一班次的函数，然后每隔10毫秒调用一次该函数。您还可以查看像jQuery这样的Javascript库，它提供了一个很好的API来进行移动。

Answer 2

你的意思是这样吗？

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);
}

Answer 3

问题是你不能从你开始的地方回来吗？

为什么不在move

中添加新的for循环

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

你是否也希望它永远循环，即开始 - ＆gt;左 - ＆gt;开始 - ＆gt;一次又一次？

我想使用循环向左移动一个元素

3 个答案: