javascript - 围绕用户点击位置居中图像

Question

我正在尝试使用 JavaScript 移动图像，使其以用户单击的位置为中心，无论是垂直还是水平。这将如何实现？

我尝试了以下代码，但它将图像的左上角与单击的位置对齐，这不是我想要的。

document.onclick = userClicked;
function userClicked() {
  var x = event.clientX;
  var y = event.clientY;
  var cat = document.getElementById("catAppear");
  cat.style.display = '';
  cat.style.position = 'absolute';
  cat.style.left = x + 'px';
  cat.style.top = y + 'px';
}

<div class="container">
  <img alt="catAppear" id="catAppear" style="display: none" src="https://www.coopmcs.com/dotclear/public/chat.png" />
</div>

Answer 1

只需从 x 坐标减去图像宽度的一半，从 y 坐标减去一半高度，以使图像以单击位置为中心。

document.onclick = userClicked;
function userClicked() {
  var x = event.clientX;
  var y = event.clientY;
  var cat = document.getElementById("catAppear");
  cat.style.display = '';
  cat.style.position = 'absolute';
  cat.style.left = x - cat.width / 2 + 'px';
  cat.style.top = y - cat.height / 2 + 'px';
}

<div class="container">
  <img alt="catAppear" id="catAppear" style="display: none" src="https://www.coopmcs.com/dotclear/public/chat.png"/>
</div>

Answer 2

您可以将图像的宽度和高度除以 2，然后用宽度除以 2 减去 x，用高度除以 2 减去 y。这将为您提供图像的中心。

document.onclick = userClicked;
function userClicked() {
  var x = event.clientX;
  var y = event.clientY;
  var cat = document.getElementById("catAppear");
  cat.style.display = "block";
  cat.style.left = x - (cat.width/2) + 'px';
  cat.style.top = y - (cat.height/2) + 'px';
};

#catAppear {
  position: absolute;
}

<div class="container">
  <img alt="catAppear" id="catAppear" style="display: none" src="https://www.coopmcs.com/dotclear/public/chat.png" />
</div>