Javascript：控制图像'；移动速度

我是一个初学者，目前我可以将图像从左向右移动，移动结束后，我可以将其返回初始点。我想做的也是控制图像的速度。为此，我尝试了以下代码：

<script type="text/javascript">
    var userWidth = window.screen.width;

    function moveRight(speed) {
        var pp = document.getElementById("myimage");
        var lft = parseInt(pp.style.left);
        var tim = setTimeout("moveRight()", speed);
        lft = lft + 50;
        pp.style.left = lft + "px"
        if (lft > (userWidth) + 80) {
            document.getElementById("myimage").style.left = 100 + "px";
            clearTimeout(tim);
        }

    }
</script>

var userWidth=window.screen.width；
功能右移（速度）{
var pp=document.getElementById（“myimage”）；
var lft=parseInt（pp.style.left）；
var tim=setTimeout（“moveRight（）”，速度）；
lft=lft+50；
pp.style.left=lft+“px”
如果（lft>（用户宽度）+80）{
document.getElementById（“myimage”）.style.left=100+“px”；
清除超时（tim）；
}
}

和html：

<form>
    <input type="button" value="Speed 1" onclick="moveRight(50)"  />
    <input type="button" value="Speed 2" onclick="moveRight(25)"  />
    <input type="button" value="Speed 3" onclick="moveRight(10)" />
</form>

---

我的问题：单击三个按钮中的任何一个都没有区别。图像总是以相同的速度移动，看起来按钮无法控制速度。

您上面的代码没有任何速度逻辑。您要做的唯一一件事是延迟动画开始之前的时间：

var tim = setTimeout("moveRight()", speed);

对等待属性（速度）的函数进行递归调用也是不可能的

我设置了一个快速小提琴来演示jquery动画速度：

要在动画中实现速度，有两种可能性：

•循环逻辑： 您承认，您可以使用循环而不是秒，然后创建一个for循环，该循环将迭代直到动画结束编辑：此处仅用于解释

•时间逻辑 你有一个距离和一个时间段（以秒为单位），把距离除以时间段，它给你一步，把距离除以一步，它会给你一个步数，然后只需要在循环中每秒触发一次settimeout编辑：如果您实现了这一点，并且渴望获得更流畅的东西，我建议您看看requestAnimationFrame HTML5 Api：

---

您在原始代码中犯的错误是，当您再次调用函数时，您没有传递速度值，这意味着唯一发生的事情是第一个动画被延迟

尝试用这一行替换调用，然后代码就可以工作了

var tim = setTimeout("moveRight("+speed+")", speed);

---

有了它，您仍然可以不使用Jquery执行此操作您必须在

设置超时中将变量
速度
传递到
移动右键
：

var userWidth = window.screen.width,
    tim,
    pp = document.getElementById("myimage"); // You should cache your variables

function moveRight(speed) {
    var lft = parseInt(pp.style.left) || 0;

    tim = setTimeout("moveRight(" + speed + ")"); // Here you have to pass speed as a parameter
    lft = lft + speed; // Here I guess it is speed rather than 50
    pp.style.left = lft + "px"
    if (lft > (userWidth) + 80) {
        pp.style.left = 100 + "px";
        clearTimeout(tim);
    }
}