자바 스크립트를 사용하여 이미지를 이동하는 방법

이 이미지를 오른쪽으로 이동하는 데 문제가있어 누구나 스크립트를 시작한 것을 도와 줄 수 있으며 매우 혼란 스럽습니다.자바 스크립트를 사용하여 이미지를 이동하는 방법

<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

찾고있는 것을 추측? 이미지 슬라이더 또는 회전 목마를 사용하고 있습니까? –

루프가 전혀 찾고있는없는 것입니다 동안

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 길이 - 길이가 0이 아닌 길이는 제공하지 않는 단위가 필요합니다.

둘째, 원시 값은 원할 경우 참조로 전달되지 않습니다. 그러나 객체는 있습니다. 따라서 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

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

추가 "픽셀"당신의 가치 후도 변화가 보이지하기 위해서는 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

자바 스크립트를 사용하여 이미지를 이동하는 방법

답변

관련 문제