Question

我的代码在网页中央显示一个图片，如果点击是在图片外部或内部，则会执行两种不同的操作。我想在每次onclick（）事件中随机更改图像的位置（无论点击是否进入），同时保持在页面初始大小内。

这两个动作都已正确完成，但图像无法改变位置。有人能告诉我应该改变什么吗？

<html>
  <head>
    <title>random position</title>
  </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
   $(window).height();
   $(window).width(); 
  </script>

  <body>

    <style>

    #myImage { position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;  }
    </style>

    <script>
function moveImg() {
  var img = document.getElementById("myImage");

  var width = $(img).width();
  var height = $(img).height();


  document.addEventListener("click", function(e) {
    var offset = $(img).offset();
    if (e.target === img) {
      action 1;
    } 
    else {
     action 2;
    }
    // GENERATE RANDOM LOCATION IN BOTH CASES
    img.offset.left = Math.floor(Math.random() * (window.width()- 0) + 0);
    img.offset.top = Math.floor(Math.random() * (window.height()- 0) + 0);


  }, false);
}
    </script>
      <img id="myImage"  src="img.gif" onclick="moveImg()">
  </body>
</html>

Answer 1

这里有一些问题。您在用户点击时调用了一个函数，但在该函数中，您为该图像的点击指定了一个事件监听器。在每次点击时不断添加越来越多的事件监听器是没有意义的。我更改了下面的代码，演示了一次添加事件监听器，而不是每次点击都是如此。

其次，action 1和action 2并不合理。我评论了这些，因为我不确定你在那里尝试做什么。

您也错误地尝试更改图像的顶部和左侧属性。我更正了使用css()函数。

以下代码显示了javascript中的更改。或者你可以click here

$(document).ready(function() {

  var img = document.getElementById("myImage");

  var width = $(img).width();
  var height = $(img).height();


  document.addEventListener("click", function(e) {
    var offset = $(img).offset();
    if (e.target === img) {
      //action 1;
    } 
    else {
     //action 2;
    }
    // GENERATE RANDOM LOCATION IN BOTH CASES
    $(img).css({
    top: Math.floor(Math.random() * $(window).height()),
    left: Math.floor(Math.random() * $(window).width())});
  }, false);
});

Onclick（）事件：图像随机出现

1 个答案: