0

ユーザーが X および Y オフセット値を入力すると、画像がウィンドウの左上隅から始まり、左から右に移動し、最後に画像が上から下に移動して最終位置になるように、画像をアニメーション化したかったのです。一度に 1 ピクセル。

これが私のコードですhttp://jsfiddle.net/nMdNk/3/

私のjavascriptでは、私は持っています:

function moveRight() {
    hx = document.getElementById("xval").value;
    imgx = document.getElementById("picture").clientX; //get current X from image
    for (a = 0; a <= imgx; a++;) {

        if (imgx == hx) {
            moveDown();
        } else {
            setTimeOut(moveRight, 1000);
        }
    }
}

function moveDown() {
    hy = document.getElementById("yval").value;
    imgy = document.getElementById("picture").clientY; //get current Y from image
    for (b = 0; b <= imgy; b++;) {

        if (imgy = hy) {
            return; //stop when reach to final destination 
        } else {
            setTimeOut(moveDown, 1000);
        }
    }
}

写真の x 座標と y 座標に対して間違った要素を取得していると思いますが、よくわかりません。どんな助けでも大歓迎です、ありがとう！

4

1 に答える 1

0

コードを修正して、このJSFiddleに入れました。いくつかの変更を加えましたが、それほど劇的ではありません。主なものは、for ループが不要であり、奇妙な動作が発生することでした.setTimeout で関数を呼び出すことにより、for ループは本質的にバイパスされます。したがって、for ループの反復ごとに、setTimeout を介してまったく新しい一連の操作を開始します。たとえば、チェック (imgx == hx) がない場合、for ループがあっても、スクリプトは無期限に続行されます。

function init(){
    document.getElementById("picture").style.left = '0px';
    document.getElementById("picture").style.top = '0px';
    moveRight();
}
function moveRight() {
    hx = 1 * document.getElementById("xval").value;
    imgx = document.getElementById("picture").offsetLeft; //get current X from image
    document.getElementById("picture").style.left = (imgx + 1) + 'px';
    if (imgx == hx) {
        moveDown();
    } else {
        setTimeout(moveRight, 10);
    }
}

function moveDown() {
    hy = 1 * document.getElementById("yval").value;
    imgy = document.getElementById("picture").offsetTop; //get current Y from image
    document.getElementById("picture").style.top = (imgy + 1) + 'px';
    if (imgy == hy) {
        return; //stop when reach to final destination 
    } else {
        setTimeout(moveDown, 10);
    }
}
于 2013-03-07T00:55:54.623 に答える