Question

我有一个名为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确实可以工作（我已经过警报测试），但是该图片不会移动...有什么想法吗？

Answer 1

您需要指定position属性，可能是relative。如果其中一种更适合您的需求，您也可以使用absolute或fixed定位。

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

Answer 2

您是否尝试过更改元素的位置？

https://www.w3schools.com/css/css_positioning.asp

例如：

<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>

Answer 3

您需要一个relative职位才能更改top，bottom，left，right属性

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

单击图像时是否可以移动图像？

3 个答案: