3

この画像を右に移動するのに問題があります。スクリプトを開始したばかりのiveを助けてくれる人はいますか？非常に混乱しています。

<html>
<head>
</head>
<body style="margin:0px;">
<img id="tank" style="position:absolute;"src="tank.png"/>
<script type="text/javascript">
var change = document.getElementById('tank').style.left = '0';

while(change < 200)
{
change++;
}
</script>
</body>
</html>
4

4 に答える 4

3

そのスクリプトには多くの問題があります...

まず、CSS の長さとして整数を設定しようとしています。ゼロ以外の長さには単位が必要ですが、提供していません。

第 2 に、プリミティブ値は、必要なだけの理由で参照渡しされません。ただし、オブジェクトはそうです。そのため、そのプロパティを追跡しdocument.getElementById('tank').styleて変更し、画像を移動できます。left

第 3 に、スクリプトの実行中にブラウザはページを再描画しません。つまり、スクリプトで画像を移動すると、画像はすぐに終了位置に移動します (スクリプトは即座に実行されます)。

あなたが間違ったことをすべてカバーしていると思います。それでは、正しく行う方法を説明します。

(function() {
// don't leak variables into the global scope - think "variable = carbon dioxide"
    var elem = document.getElementById('tank'), pos = 0,
        timer = setInterval(function() {
            pos++;
            elem.style.left = pos+"px";
            if( pos == 200) clearInterval(timer);
        },25);
})();
于 2012-07-28T15:36:19.940 に答える
0

アニメーションを実行するには、タイマーのスタイル プロパティを変更する必要があります。

var thank = document.getElementById("thank");
var x = 0;

setInterval(function(){ thank.style.left = x + "px"; x++; },
            20); // 20ms = 50 frames per second
于 2012-07-28T15:35:40.753 に答える
0

while ループはあなたが探しているものではありません。すべての作業をすぐに実行するか、条件が常に true の場合、無限ループであるためページがフリーズします。

代わりに使用できますsetInterval：

<script type="text/javascript">
var left = 0, //Work with actual number type
    tank = document.getElementById('tank'),
    timerId = 0;

timerId = setInterval( function() { //This function is called by the browser every 33 milliseconds
    if( left++ > 200 ) {
        clearInterval( timerId ); //Stop the interval because left is > 200
    }
    tank.style.left = left + "px"; //Only convert to number + "px" when we need to set .style.left
}, 33 );
</script>

デモhttp://jsfiddle.net/Vhpc9/

于 2012-07-28T15:36:10.827 に答える
0 
var change = document.getElementById('tank').style.left = '0';

変更を表示するには、値の後に「px」を追加し、0 よりも大きな値 (200 など) を追加します。

var change = document.getElementById('tank').style.left = '200px';

私はこれがあなたが探しているものだと思います

var image = document.getElementById('tank');
var change = 0;


setInterval(function(){
image.style.left = change+"px";
change+=5;
if(change>200){
clearInterval();
}
},50);
于 2012-07-28T15:37:13.213 に答える