如何使用Top和LeftCSS屬性將元素定位在影像上非常精確的像素處-有解無憂

我想在影像點擊時在特定像素處顯示一個點。我通過以 % 給出頂部和左側值來顯示它。發生的情況是當單擊點內的另一個像素時，點沒有移動。單擊外部時，它正在移動。我不明白為什么會這樣。

可能是因為每個像素的頂部和左側值的變化非常小。

我已經更新了在圓圈內顯示點的 CSS

.hObiiS{
  border: solid 1px #303030 !important; 
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: none !important; 
  height: 9px !important; 
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  width: 9px !important; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hObiiS::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 1px; 
    background-color: rgb(224, 1, 1);
    border-radius: 50%;
}

<div class="hObiiS" style="top: 25.4601%; left: 58.6382%;"></div>

有人可以提供每像素移動點的解決方案嗎？

uj5u.com熱心網友回復：

這是您的問題解決方案。

let container  = document.querySelector('img');
let dot = document.getElementById('dot');

document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
  
  var parentPosition = getPosition(container);
    var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
     
    dot.style.left = xPosition   "px";
    dot.style.top = yPosition   "px";
}
});






// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;
 
  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;
 
      xPos  = (el.offsetLeft - xScroll   el.clientLeft);
      yPos  = (el.offsetTop - yScroll   el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos  = (el.offsetLeft - el.scrollLeft   el.clientLeft);
      yPos  = (el.offsetTop - el.scrollTop   el.clientTop);
    }
 
    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

.container {
  position: relative;
  cursor: "crosshair";
}
#dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: red;
  transform: translate(100, 0);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <img width="200px" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
    <span id="dot" />
  </div>
</body>
</html>

密碼筆

您的滑鼠點擊位置（e.clientX 和 e.clientY）相對于瀏覽器的左上角，這就是您的點擊位置不準確的原因。您可以研究本文中的詳細說明。將元素移動到點擊位置

uj5u.com熱心網友回復：

您需要阻止點停止點擊進入影像。

您可以為此使用指標事件。

這是一個簡單的例子：

.container {
  position relative;
  display: inline-block;
  width: 30vmin;
  height: 30vmin;
}

img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dot {
  background: red;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
  pointer-events: none;
}

<div class="container"><img onclick="alert('I saw the click');" src="https://picsum.photos/id/1015/300/300">
  <div class="dot"></div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/493556.html

標籤：html css 图片点击像素

上一篇：“裁剪檔案？”不能分配給引數型別'File'，Flutter

下一篇：部分切除的畫中畫