Javascript - 요소의 위치를 ​​변경하는 setInterval

Question

화면에서 요소를 이동하는 방법을 알아 내려고하고 있습니다. 더 정확한 제어가 필요하기 때문에 JQuery의 animate() 메서드를 사용하고 싶지 않습니다.

setInterval(function() { 
    var e = document.getElementById("aDiv"); 
    // Increase the top position by 1 pixel 
    e.style.top = '+1px'; 
    // If the top position is greater than 100px, set it to 100px 
    if (parseInt(e.style.top) > 100) { e.style.top = '100px'; } 
}, 1000); 

http://jsfiddle.net/9RLkJ/ 감사합니다 : 여기에 기본적인 생각이다.

Answer 1

var e = document.getElementById("aDiv"); 
var s = 1; 
setInterval(function(){ 
    var eLeftPos = e.offsetLeft; 
    e.style.left = (eLeftPos + s) + 'px'; 

}, 1000); 

위의 코드는 오른쪽에있는 상자를 이동합니다;

실무 데모 move the box to bottom

Answer 2

var top= document.getElementById("aDiv").style.top; setInterval(function() { top += 1; var e = document.getElementById("aDiv"); // Increase the top position by 1 pixel e.style.top = top + 'px'; // If the top position is greater than 100px, set it to 100px if (parseInt(e.style.top) > 100) { e.style.top = '100px'; } }, 1000);