单击图像时移动图像的功能？-解网

问：

我有一个名为 index.html 的 html 文件，它里面有这个 div

  <body>
     <div id="rock"> <img src="rock.PNG" alt="rock" onclick="test()"> </div>
     <div id="paper"> <img src="paper.PNG" alt="rock"></div>
     <div id="scissors"> <img src="scissors.PNG" alt="rock">  </div>

test 是我的功能，它位于同一个文件中并写在这里

 <script type="text/javascript">
    function test(){
      var elem = document.getElementById("rock");
      var pos = 0;
      var id = setInterval(frame, 10);
      function frame() {
        if (pos == 350) {
          clearInterval(id);
        } else {
          pos++;
          elem.style.top = pos + 'px';
          elem.style.left = pos + 'px';
        }
      }
    }
  </script>

但是当我的页面运行时，我单击图像，它没有移动。显示图像，并且 onclick 确实可以工作（我用警报测试了它），但图像不会移动......有什么想法吗？

JavaScript 的HTML

<body>
    <div id="rock" onclick="test()" style="position:absolute;"> <img src="teste.PNG" alt="rock" > </div>
</body>
<script type="text/javascript">
    var pos = 0;
    var elem = null;
    var id = null;
    function test() {
        console.log("test");
        elem = document.getElementById("rock");
        id = setInterval(frame, 10);
    }

    function frame() {
        console.log("frame");
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }
</script>

6赞 MaKR 5/9/2019 #2

您需要指定属性，可能为 .如果其中之一更适合您的需求，您也可以使用或定位。positionrelativeabsolutefixed

#rock, #paper, #scissors {
    position: relative;
}

2赞 Olivier Boissé 5/9/2019 #3

您需要一个能够更改,,,属性的位置relativetopbottomleftright

<div id="rock" style="position: relative;"> 
   <img src="rock.PNG" alt="rock" onclick="test()"> 
</div>

上一个：如何从文本文件中删除确切的文本？

下一个：对列表中的货币对进行计数

单击图像时移动图像的功能？

Function to move an image when image is clicked?

评论