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>

私の問題: 3 つのボタンのどれをクリックしても違いはありません。画像は常に同じ速度で動いており、ボタンで速度を制御できないように見えます。

4

3 に答える 3

1

元のコードで犯した間違いは、関数を再度呼び出すときに速度の値を渡さないことです。これは、最初のアニメーションが遅延することだけが発生することを意味します。

呼び出しをこの行に置き換えてみると、コードが機能するはずです。

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

これにより、Jqueryを使用せずにこれを行うことができます

于 2012-11-23T14:21:50.077 に答える
1

上記のコードには速度ロジックがありません。あなたがしているのは、アニメーションが開始するまでの時間を遅らせることだけです:

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

属性 (速度) を待っている関数を再帰的に呼び出すことも問題です。

jquery アニメーションの速度を示すために、簡単なフィドルを設定しました。

http://jsfiddle.net/yeQtB/

アニメーションの速度を達成するには、次の 2 つの可能性があります。

• サイクル ロジック : 数秒ではなく、サイクルを操作して、アニメーションが終了するまで反復する for ループを作成するだけでよいことを認めます。編集：これは説明のためにここにあります

• タイム ロジック 距離と時間枠 (秒単位) があり、距離を時間枠で割ると歩数が得られ、距離を歩数で割ると歩数が得られます。ループ内で毎秒起動する settimeout を作成します。編集:これを達成し、もう少しスムーズなものを求めている場合は、 requestAnimationFrame HTML5 Api を確認することをお勧めします:

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

于 2012-11-23T14:15:56.517 に答える
1

に変数を渡す必要がありspeedます：moveRightsetTimeout

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 に答える