1

変数カウンターを取り出してdocument.getElementById("movee").style.top数値に等しく設定すると、正常に動作します。変数カウンターとそのコードを組み合わせると、理論的には画像が動きます。なのになぜかうまくいかない！

<html>
<style type="text/css">
    #movee
    {
        position:absolute;
    }
</style>

<script type="text/javascript">
    function goDown()
    {
        var counter=1; 
        while (counter<300)
        {
            document.getElementById("movee").style.top="counter";
            var counter=counter+1;
        }
    }
</script>

<input type="button" onclick="goDown()" value="Move!">
<img src="test.png" id="movee"></img>
</html>
4

3 に答える 3

4

#movee のトップ スタイル プロパティを、変数 counter の値ではなく文字列 "counter" に設定しています

document.getElementById("movee").style.top=counter+"px";

また、要素をアニメーション化しようとしているようですが、スクリプトの実行が終了した後にのみ更新が行われるため、テクニックは機能しません。css 遷移、または jQuery(jQuery.animate) のようなアニメーションを行うライブラリを調べることをお勧めします。

于 2013-02-23T19:27:47.503 に答える
0

「counter」から引用符を削除し、その行の後には「var counter」を使用せず、counter +=1 のみを使用します

于 2013-02-23T19:27:28.397 に答える
0

上部のスタイルを設定するコードが正しかったとしても、ループ中にコードがブラウザーに制御を返さないため、要素はアニメーション化されません。代わりに、300 ピクセルすべてを一度に移動するように見えます。

于 2013-02-23T19:28:41.413 に答える