jquery - 受边距影响的 clientX/Y - 扭曲 jQuery/CSS 游标效果

Question

原始标题:jQuery 尾随 .Cursor(鼠标)效果在 Blogger 上无法正常工作(已编辑)

我一直在为这个尾随光标效果绞尽脑汁。

无论出于何种原因，它在我的 Blogger/BS4 网站(添加了 BS4 的剥离 Blogger 模板)中显示稍微偏离，但显示得很好 在 Codepen 中。

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

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

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

事实上，我确实在一个更复杂的 Blogger 实现上尝试过这个，并且 clientY 坐标在另一个站点上又相差 50 像素左右。手动破解这个模板可能不是一个好主意，因为它可能在登陆页面上很好，但在另一个页面上完全关闭!

注意 我为这个演示启用了指针，但它应该以 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>

Answer 1

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

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

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

我建议使用后者。