如何用javascript移动图像

我无法让该图像移动到正确的位置，任何人都可以帮助我开始编写脚本，而且我发现它很混乱。如何用javascript移动图像

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

来源

2012-07-28 user1482978

什么为什么你想让它移动？你正在尝试一个图像滑块或旋转木马？ – 2012-07-28 15:45:32

要你需要改变定时器的样式属性的动画......像

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

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

来源

2012-07-28 15:35:40 6502

的东西，而循环是你在找什么不为所有，但将尽一切它立即工作，或者如果条件始终为真，那么它会冻结您的页面，因为它是无限循环。

你可以使用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-28 15:36:10 Esailija

有很多事情错的脚本...

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

来源

2012-07-28 15:36:19

虽然我同意，但我认为将其全部包装在一个匿名函数中会让探询者感到困惑。 – DanMan 2012-07-28 15:47:31

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-28 15:37:13 AdityaParab

如何用javascript移动图像

回答

相关问题