如何为 div 元素设置原点？

Question

如何为 div 元素设置原点？

javascripthtmlcss

4

假设我有一个 div 跟随鼠标指针在屏幕上移动。这通过处理文档的 mousemove 事件并基于事件数据设置其 left 和 top 位置来完成。

对于这个例子，让我们假设它的宽度和高度为 10。

希望它始终居中于鼠标指针上。要做到这一点，需要水平偏移 left 和 top，使它们分别偏移 div 宽度的一半和 div 高度的一半。这样就可以完美地居中于鼠标指针了。

document.querySelector(".circle").style.left = e.x - (width / 2)

然而，在应用程序中有很多地方都需要这样做，这似乎很麻烦。是否可以设置原点，使得当我设置 left 和 top 属性时，不需要偏移一半的宽度和高度，因为原点会在 div 的中心？

我能找到的唯一的东西是 transform-origin 属性，但这似乎仅适用于 transform CSS 属性，而不适用于类似于 left、margin-left 等属性。

这是否可行？

- Ryan Peschel

2个回答

1

你可以将它相对于一个父元素进行绝对定位，该父元素的大小为0x0且相对定位，并进一步使父元素随鼠标移动。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .origin {
            position: relative;
            width: 0px;
            height: 0px;
         } 

         .circle {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 3px solid red;
         }
      </style>
   </head>
   <body>

      <div class="origin">
         <div class="circle"/>
      </div>

   </body>
</html>

查看更多详情：https://www.w3schools.com/css/css_positioning.asp

- vbuzze

哦，这是个不错的想法。很酷，我可能会试一下。也许没有origin CSS属性那么优雅，但仍然有效。 - Ryan Peschel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel_Knights · Accepted Answer

您可以使用以下方法：

transform: translate(-50%, -50%);

此计算从元素本身的宽度和高度计算百分比。

示例代码片段：

const move = document.getElementById("move")
const mouseMoveHandler = e => {
  move.style.left = e.pageX + 'px';
  move.style.top = e.pageY + 'px';
}

window.addEventListener('mousemove', mouseMoveHandler)

#move {
  position: absolute;
  transform: translate(-50%, -50%);
}

<div id="move">I follow the cursor</div>