Question

这是我的代码。如果我用imgObj = document.getElementById（＆＃39; myImage＆＃39;）初始化一个对象;一切正常，但imgObj =＆＃34; bird3.png＆＃34 ;;动画确实发生了。有什么想法吗？

  <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 Image（）; imgObj =＆＃34; bird3.png＆＃34 ;;

使用： imgObj = document.getElementById（＆＃34; myImage＆＃34;）;

如何移动图像对象

2 个答案: