jquery - 如何修复此 jQuery 以在滚动时获取鼠标位置并使我的 div 平滑地跟随我的光标？

Question

我一直在玩一些 jQuery，试图结合我在教程和堆栈溢出答案中找到的两段代码。我有一个圆形 div 跟随我的光标并带有轻微的延迟效果，但是因为我没有告诉它在滚动时找到鼠标位置，所以它总是会被抛在后面，然后在我完成滚动时赶上。

我已经设法在一定程度上修复它，但它真的很生涩，我想知道如何让它更平滑，如果可能的话，消除延迟（仅在滚动时）。

jQuery(document).ready(function($) {

  var mouseX = 0;
  var mouseY = 0;
  var lastScrolledLeft = 0;
  var lastScrolledTop = 0;
  var xp = 0;
  var yp = 0;

  $(document).mousemove(function(event) {
    captureMousePosition(event);
  })

  $(window).scroll(function(event) {
    if (lastScrolledLeft != $(document).scrollLeft()) {
      mouseX -= lastScrolledLeft;
      lastScrolledLeft = $(document).scrollLeft();
      mouseX += lastScrolledLeft;
    }
    if (lastScrolledTop != $(document).scrollTop()) {
      mouseY -= lastScrolledTop;
      lastScrolledTop = $(document).scrollTop();
      mouseY += lastScrolledTop;
    }
    window.status = "x = " + mouseX + " y = " + mouseY;
  });

  function captureMousePosition(event) {
    mouseX = event.pageX;
    mouseY = event.pageY;
    window.status = "x = " + mouseX + " y = " + mouseY;
  }


  $(document).mousemove(function(e) {
    mouseX = e.pageX - 20;
    mouseY = e.pageY - 20;
  });

  setInterval(function() {
    xp += ((mouseX - xp) / 3);
    yp += ((mouseY - yp) / 3);
    $("#circle").css('transform', 'translate(' + xp + 'px, ' + yp + 'px)');
  });

});

body,
html {
  position: relative;
  height: 1000px;
  width: 100%;
  margin: 0;
}

.circle {
  position: absolute;
  background: #000000;
  opacity: .075;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="circle" class="circle"></span>

标签： jquery

Answer 1

fixed您可以通过使用元素的位置来避免滚动问题并提高性能#circle，并删除setInterval(). transition在CSS 中使用 acircle来创建“延迟”效果。试试下面的例子。

请注意，您可以通过修改transitionCSS 中的速度来增加/减少延迟。

jQuery($ => {
  let $circle = $('#circle');
  let half_cWidth = $circle.width() / 2;
  let half_cHeight = $circle.height() / 2;
  
  $(document).on('mousemove', e => {
    $circle.css({
      top: e.clientY - half_cHeight,
      left: e.clientX - half_cWidth
    });
  });
});

body,
html {
  position: relative;
  height: 1000px;
  width: 100%;
  margin: 0;
}

.circle {
  position: fixed;
  background: #000000;
  opacity: .075;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: none;
  transition: top 0.1s, left 0.1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="circle" class="circle"></span>