Question

我在鼠标移动时创建了一个跟随鼠标x和y坐标的形状。您可以在此处查看结果：http://codepen.io/anon/pen/qNKgqo

这样可以正常工作，形状位于鼠标光标的中心。不幸的是我有一些问题。

正如您在demo中看到的，我有一个部分，位于屏幕顶部。在HTML标记的最顶部，您会注意到注释部分。如果删除注释标记，则会设置新的部分。当您将鼠标悬停在项目上时，结果与之前相同，但是当您滚动到下一部分 - 具有三个拇指的部分时，您会注意到形状不是以鼠标为中心，它的方式偏移。只有当你将鼠标悬停在底部时，你才会看到一小块形状。

要将圆圈居中到鼠标光标的中心，请使用以下脚本：

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

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

  var offset = target.offset();
  var top = offset.top;
  var left = offset.left;

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

上面的代码来自mouseMove函数，它将在鼠标移动时触发。

我的问题是我的错误或代码中缺少的内容。如果只有一个部分它可以正常工作，但在将另一个部分添加到HTML标记后，它将会搞砸。

Answer 1

pageX和pageY：

相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置，如果页面中嵌入了嵌入的可滚动页面并且用户移动滚动条，则实际上可以更改位置。

所以使用 pageX 和 pageY 而不是clientX / Y：

  var mX = (event.pageX - left) - width / 2;
  var mY = (event.pageY - top) - height / 2;

有关详细信息，请阅读clientX/Y and pageX/Y之间的区别？

为什么clientX和Y会在滚动时更改？

1 个答案: