如何用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移動圖像

回答

相關問題