2

我是初学者，目前我可以将图像从左向右移动，并且可以在移动完成后将其转回初始点。我想做的也是控制图像的速度。为了做到这一点，我尝试了以下代码：

<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>

和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>

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

4

3 回答 3

1

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

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

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

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

http://jsfiddle.net/yeQtB/

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

• 循环逻辑：您承认您可以使用循环而不是秒，然后只需创建一个 for 循环，该循环将迭代直到动画结束。编辑：这只是为了解释

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

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

于 2012-11-23T14:15:56.517 回答
1

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

尝试用此行替换调用，然后您的代码应该可以工作。

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

有了这个，你仍然可以在不使用 Jquery 的情况下做到这一点

于 2012-11-23T14:21:50.077 回答
1

您必须将变量传递speed给moveRight：setTimeout

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);
    }
}
于 2012-11-23T14:23:34.673 回答