Question

我无法将此图片移至右侧，任何人都可以帮助我刚开始编写脚本，我发现它非常令人困惑。

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

Answer 1

这个剧本有很多问题......

首先，您试图将整数设置为CSS长度 - 非零长度需要一个您未提供的单位。

其次，原始值不是仅仅因为你想要它而通过引用传递的。然而，对象是。因此，您可以跟踪document.getElementById('tank').style并更改其left属性以移动图片。

第三，浏览器在脚本运行时不会重绘页面，这意味着如果你有脚本移动图像，它会立即处于结束位置（你甚至不会在开始时看到它）由于脚本立即运行而产生的位置。）

我认为这涵盖了你做错的一切。现在，这是正确的做法。

(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);
})();

Answer 2

要制作动画，您需要更改计时器中的样式属性...类似

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

setInterval(function(){ thank.style.left = x + "px"; x++; },
            20); // 20ms = 50 frames per second

Answer 3

while循环不是你想要的，它会立即完成它的所有工作，或者如果条件总是为真，那么它将会冻结你的页面，因为它是一个无限循环。

您可以改为使用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/

Answer 4

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

如何使用javascript移动图像

4 个答案: