Question

我试图将div元素的中心定位到鼠标光标的中心，然后沿着它的移动。

我已经提出了下面的代码，但是这个问题是，下面的div不是位于光标的中心，而是偏离了光标。

请参阅我的问题的更新。

WORKFLOW

我的代码背后的基本思想是，当鼠标进入cast div元素时，应显示当前项目中的.post-entry并按照鼠标光标。当鼠标离开.pointer时，它应该被隐藏。

CODE

HTML帖子项目：

div

JS：

<article class="col-md-4 col-sm-6 post-entry">
    <a href="#" title="">
        <figure class="post-thumb">
            <img src="http://placehold.it/300x300" alt="">
            <div class="pointer" style="background: red;"></div>
        </figure><!-- End figure.post-thumb -->
    </a>
</article><!-- End article.col-md-4 post-entry -->

问题/演示

如前所述，跨度跟随鼠标光标，只有跨度未定位到光标的中心。它会偏移鼠标。 See live demo here

我已经为mX和mY变量尝试了类似的东西，但没有成功：

$('.entry .post-entry').each(function() {
  $(this).on("mouseenter", mouseEnter);
  $(this).on("mousemove", mouseMove);
  $(this).on("mouseleave", mouseLeave);
});


function mouseEnter(event) {

  console.log('enter');

  var target = $(this);
  var dot = target.find('.pointer');

  var mX = (event.clientX);
  var mY = (event.clientY);

  set(
    dot, {
      x: mX,
      y: mY,
      force3D: !0
    }
  );

};


function mouseMove(event) {

  console.log('move');

  var target = $(this);
  var dot = target.find('.pointer');

  // var offset = target.offset();
  // var width = target.width();
  // var height = target.height();
  // var top = offset.top;
  // var left = offset.left;

  var mX = (event.clientX);
  var mY = (event.clientY);

  $(dot).css('-webkit-transform', 'translate3d(' + mX + 'px, ' + mY + 'px, 0)');

};

function mouseLeave(event) {

  console.log('leave');

    var target = $(this);
    var dot = target.find('.pointer');

    $(dot).css('-webkit-transform', 'translate3d(0, 0, 0) scale(0, 0)');


};

function onClick(event) {
  event.preventDefault();
  console.log('click');
};

function set(el, obj) {
  var dot = $(el).css('-webkit-transform', 'translate3d(' + obj.x + 'px, ' + obj.y + 'px, 0px)');
  return dot;
};

@hiEven的答案也不起作用，并且会让我遇到同样的问题：

var mX = (event.clientX - $(this).offset().left) / $(this).width() * $(this).width() - .125 * $(this).width();
var mY = (event.clientY - $(this).offsetTop) / $(this).height() * $(this).height() - .125 * $(this).width();

我知道我应该将.pointer划分为一半，但我应该如何在代码中实现它对我来说是一个很大的问号。

希望有人可以帮助我解决这个问题。我会很感激。提前谢谢，如果还有任何问题，请告诉我。

更新

我创建了两个新的Codepen项目：

无图像使用：http://codepen.io/anon/pen/GqGOLv 当您将鼠标悬停在第一个项目上时，您将看到棕色指针正确地跟随您的鼠标光标 - 我正在寻找什么。但是当悬停在第二个上时，只有当你位于物品的最左侧时，才会看到红色指针。

当我使用图片时：http://codepen.io/anon/pen/QExOkx 这个例子的问题是当你在第一列的最顶部时，你会看到棕色指针。将鼠标悬停在第二个项目的左上角时，您将看到一小块红色指针，与没有图像的示例相同。

两个指针都应正确跟随鼠标光标。我正在寻找一种可以使用图像的解决方案。

除了这两个例子，当我向第一个项目添加额外的transform: calc(mX - 50%, mY - 50%)时，棕色指针不会位于鼠标光标的中心，只有当它被设置时保证金为零。

所以我不知道缺少什么，为什么它只适用于第一个例子（没有图像），只适用于第一个项目？有什么想法吗？

Answer 1

我假设您希望圆圈成为鼠标的中心，对吗？

尝试执行此操作transform: calc(mx - 50%, my - 50%)

这是demo

Answer 2

根据我的最新更新，我不符合将元素.pointer置于鼠标中心所需的正确公式。

为了在mouseMove中使用以下计算：

var mX = (event.clientX);
var mY = (event.clientY);

应改为：

var height = dot.height();
var width = dot.width();

var offset = target.offset();
var w = target.width();
var h = target.height();
var top = offset.top;
var left = offset.left;

var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
var mY = (event.clientY - top) - height / 2;

因此，这个公式正在考虑以下DOM元素.pointer将遵循用户的鼠标移动。我不确切知道为什么这个工作，但是从前一项的偏移将从当前的clientX坐标减少，所以第二项的位置被重置为零，所以指针将从每个项的左侧开始

以上代码的工作演示：http://codepen.io/anon/pen/AXdxZO?editors=0110

Answer 3

尝试以下代码

<html>
  <head>
    <style>
          #mouse_div{
            position: absolute;
            background-color: black;
          }
    </style>
    <script>
          var div_width = 100;
          var div_height = 100;
          var div_x, div_y;
          function mouse_position(event){
            var mouse_x = event.clientX;
            var mouse_y = event.clientY;
            document.getElementById("mouse_div").style.width = div_width + "px";
            document.getElementById("mouse_div").style.height = div_height + "px";
            div_x = mouse_x - (div_width / 2);
            div_y = mouse_y - (div_height / 2);
            document.getElementById("mouse_div").style.left = div_x + "px";
            document.getElementById("mouse_div").style.top = div_y + "px";
          }
    </script>
  </head>
  <body onmousemove="mouse_position(event)" onload="mouse_position(event)">
    <div id="mouse_div"></div>
  </body>
</html>

此程序获取鼠标的位置，宽度和div的高度。然后，它取x并从中减去div的宽度除以2（这使得鼠标的div位于鼠标上方）。然后程序对鼠标y做同样的事情。一旦定义了所有变量，我就使用JavaScript访问div的CSS，将div置于需要的位置。

注意：您必须确保div的位置设置为绝对，否则程序将无效。

如何用JS在鼠标移动时将div的中心定位到鼠标光标的中心？

更新

3 个答案: