如何使用javascript移动图像

How to move an image with javascript

本文关键字：图像 移动 javascript 何使用      更新时间：2024-04-23

我很难将此图像向右移动。有人能帮我吗？我刚开始编写脚本，我发现它非常令人困惑。

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

这个脚本有很多错误。。。

首先，您试图将一个整数设置为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);
})();

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

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

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>

Demohttp://jsfiddle.net/Vhpc9/

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);
相关文章：