Question

我想在鼠标点击上显示spinner。所以我写了一个代码，它在<body>空的地方正常工作，但当我点击body内的任何元素时，它都不是正确的地方。见下文：

(function($) {
  $(document).ready(function() {

    $(window).click(function(e) {
      var relativeX = (e.pageX - $(e.target).offset().left),
        relativeY = (e.pageY - $(e.target).offset().top);

      $("#sp").addClass('spinner');
      $(".spinner").css({
        "left": -20 + relativeX,
        "top": -20 + relativeY
      });
      setTimeout(function() {
        $("#sp").removeClass('spinner');
      }, 800);
    });
  });
})(jQuery);

.spinner {
  width: 40px;
  height: 40px;
  margin: auto;
  background-color: #333;
  position: absolute;
  border-radius: 100%;
  z-index: 9;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0)
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

p {
  margin: 20px;
  padding: 20px;
  border: 2px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sp"></div>
<p>Click the BOX to see problem! It's ok on outsite! </p>

我无法解决这个问题，请帮助我！

谢谢！

Answer 1

您可以使用活动中的pageX和pageY属性。

(function($) {
  $(document).ready(function() {

      $(window).click(function(e) {
          var relativeX = e.pageX,
              relativeY = e.pageY;

  $("#sp").addClass('spinner');
  $(".spinner").css({"left":-20 + relativeX ,
              "top":-20 + relativeY
           });
  setTimeout(function() {
      $("#sp").removeClass('spinner');
  }, 800);
      });
  });
})(jQuery);

.spinner {
  width: 40px;
  height: 40px;
  margin: auto;
  background-color: #333;
  position: absolute;
  border-radius: 100%;
  z-index: 9;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
p{margin:20px; padding:20px;border:2px solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sp"></div>
<p>Click the BOX to see problem! It's ok on outsite! </p>

通过jQuery获取点击点

1 个答案: