受边距影响的 clientX/Y - 倾斜 jQuery/CSS 光标效果答案

【问题标题】：clientX/Y affected by Margins - skews jQuery/CSS cursor effect受边距影响的 clientX/Y - 倾斜 jQuery/CSS 光标效果
【发布时间】：2019-06-24 13:26:18
【问题描述】：

原始标题：jQuery 尾随 .Cursor（鼠标）效果在 Blogger 上未按预期工作（已编辑）

一直在用这种尾随光标效果绞尽脑汁。

无论出于何种原因，它在我的 Blogger/BS4 网站中勉强显示（添加了 BS 4 的已剥离 Blogger 模板），但显示正常 strong> 在 Codepen 中。

在我的 Blogger/BS4 实现中，尾随圆圈坐标偏离大约 -15px（左）/- 30px（顶部）。现在我可以简单地将这些偏移量合并到我的 clientX / ClientY 坐标中以获得正确的结果，例如

var x = e.clientX + $(window).scrollLeft() -15;
var y = e.clientY + $(window).scrollTop() -30;

但是，不了解导致偏移的原因担心它会在其他用户/设备/屏幕甚至不同页面上显示不同。

事实上，我确实在一个更复杂的 Blogger 实现上尝试了这个，并且另一个站点上的 clientY 坐标又偏离了 50px 左右。手动破解此模板可能不是一个好主意，因为它在登录页面上可能很好，而在另一个页面上完全关闭！

注意我为这个演示启用了指针，但它的工作方式应该是使用cursor: none;，这样两个圆圈点就变成了光标！

任何指针将不胜感激；）

更新：

在初始响应之后，clientX/Y（也尝试过 pageX/Y、screenX/Y 等）似乎受我文档中元素上设置的边距影响 .

在我的特定缩减测试用例中，它是 Blogger 应用的 .widget 和 .section 边距，但在其他页面上无疑会存在其他元素边距，例如我的另一个博客页面更像是 -15px（左）/ - 85px（上）。调整任何设置的页面/元素边距是不可能的，所以更大的问题是：

为什么边距首先会干扰 clientX/Y 的使用。

我的理解是 clientX/Y 从视点测量坐标，我只是不明白为什么边距会产生如此大的影响。

有问题的 Blogger 演示：https://magicmbblog.blogspot.com/p/custom-circle-cursor.html（现在工作，<nav> 已应用修复！）

工作代码笔：https://codepen.io/magicmb/pen/MMoabE

代码：

<div class="cursor"></div>
<div class="cursor"></div>

<div class="blank"></div>


<style >
html,*{ margin:0; padding:0;}
*{
    /*cursor: none;*/
}

.blank {
  height: 200vh;
}
body {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/2200/1900/?random) center center;
  background-size: cover;
  height: 100vh;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
}
h1 {
  color: white;
  font-family: futura-pt, sans-serif;
  letter-spacing: 10px;
  font-weight: bold;
  text-transform: uppercase;
}
.cursor {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.cursor:nth-child(1) {
  background-color: #D26;
  z-index: 1;
}
.cursor:nth-child(2) {
  background-color: #FFF;
}
</style>

<script>
$(document)
  .mousemove(function(e) {

    $('.cursor')
      .eq(0)
      .css({
        left: e.clientX + $(window).scrollLeft(),
        top: e.clientY + $(window).scrollTop()
      });
    setTimeout(function() {
      $('.cursor')
        .eq(1)
        .css({
          left: e.clientX + $(window).scrollLeft(),
          top: e.clientY + $(window).scrollTop()
        });
    }, 100);
  })
</script>

【问题讨论】：

这是因为鼠标元素在你的 #main 元素内，它的边距为 0 15px;要么删除边距，要么将鼠标元素移到它之外。
嗨，沃尔迪尔。我不相信这是这样的。我之前将光标元素从网站页面移动到博客模板中，并将其放在下方，作为 Rory 建议的一部分，但这没有用。我刚刚把它移回了那里，但这并没有解决它。
我想避免按照 Rory 的建议覆盖任何模板边距等，我最初只是减去 -15px（左）/ - 30px（上）以使其达到我喜欢的程度是，但事实证明，放大和缩小可能会再次稍微倾斜位置（正如我在另一个开发页面上发现的那样），所以我也想避免对偏移差异进行硬编码，因为它可能会发生变化。
第一次将光标元素移动到下方是行不通的，但是奇怪地将它移动到一个空的
中就可以了。我已经更新了演示以反映这一点。

标签： jquery css bootstrap-4 blogger mousemove

【解决方案1】：

工作示例中的问题是由父元素上的margin 引起的。特别是.section { margin: 0 15px; } 上的左侧值和.widget { margin: 30px 0; } 上的顶部值。

对此有两个修复。首先，您可以在 .cursor 元素本身上设置负边距，以抵消在父元素上设置的任何内容。

其次，您可以将 .cursor 元素移动到 body 的根部，这样父样式不会以任何方式影响它们。

我建议使用后者。

【讨论】：

哇！感谢您的超快速响应 Rory ) 我尝试按照您的第二个建议将 .cursor 元素移动到 Blogger 模板本身并将它们放在标记下，但这没有达到所需的效果。不确定这是否是您所说的“坐在身体的根部”。如果不是，请重新措辞）无论如何，我添加了以下覆盖 CSS：.section{ margin: 0 !important; } .widget{margin: 0 !important;} 希望这不会产生任何不利影响。奇怪的是，指针仍然略微偏离了几个 px！知道为什么吗？
是的，这就是我所说的身体之根。如果它仍然超出一些 px，那么将会在某处添加其他边距。
我刚刚意识到这是一个测试站点，我无法在不影响页面布局的情况下弄乱一些边距（唉！不幸的是，这不是我希望的快速修复因为！说实话，我仍然无法理解边距如何影响光标的实现。clientX 和 clientY 不应该从屏幕视点测量坐标吗？如果是，为什么这些边距会出现有吗？

【解决方案2】：

我仍然不完全确定边距抛出的问题是什么，但事实证明，当我在 <nav class="navbar2"> Bootstrap 导航栏元素内的其他开发博客之一上移动 <div class="cursor"></div> 时，它解决了完全是我的问题。

尽管我在简化的测试用例演示中没有导航栏，但我只是创建了一个空导航栏并将光标元素放在其中

<nav class="navbar2">
  <div class="cursor"></div>
  <div class="cursor"></div>
</nav>

这也解决了这里的问题。

所以我不知道这是与 Bootstrap4 相关还是与 Blogger 相关，但这对我有用。我将在此 StackOverflow 问题中添加一个 Bootstrap4 标签，以防其他人遇到类似问题。

【讨论】：