Как перемещать объект изображения

Question

Это мой код. Если я инициализирую объект с помощью imgObj = document.getElementById ('myImage'); все работает, но с imgObj = "bird3.png"; анимация не происходит. Есть идеи?

<script type="text/javascript"> 

     var imgObj = null; 
     var animate; 

     function init(){ 

      imgObj = new Image(); 
      imgObj = "bird3.png"; 
      imgObj.style.position= 'relative'; 
      imgObj.style.left = '0px'; 
     } 

     function moveRight(){ 
      imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; 
      animate = setTimeout(moveRight,20); // call moveRight in 20msec 
     } 

     function stop(){ 
      clearTimeout(animate); 
      imgObj.style.left = '0px'; 
     } 

     window.onload =init; 

    </script> 

<form> 
    <img id="myImage" src="bird3.png" /> 
    <p>Click the buttons below to handle animation</p> 
    <input type="button" value="Start" onclick="moveRight();" /> 
    <input type="button" value="Stop" onclick="stop();" /> 
    </form> 

Answer 1

Вы не можете анимировать объект, который еще не добавлен в DOM, вы просто создаете Image object, не затрагивая его ни в одном контейнере на странице, поэтому вам нужно добавить его в элемент, а затем попытаться переместить его.

Работает с imgObj = document.getElementById('myImage');, потому что вы выбираете элемент, который уже находится на DOM.

ПРИМЕЧАНИЕ: взгляните на комментарий @Danton, это правда, вы должны добавить .src.

Answer 2

Вы хотите захватить изображение на странице, а не создать новый. заменить: imgObj = new Изображение(); imgObj = "bird3.png";

с: imgObj = document.getElementById ("myImage");