Question

我想让一个div按照短暂的延迟跟踪光标移动，如下所示：http://vanderlanth.io/

正如您所看到的，＆＃39;关注者＆＃39;在动画中有短暂的延迟。

我重建了一些效果不佳的功能：

$(document).ready(function () {

    $("body").mousemove(function (e) {
        handleMouseMove(e);
    });

    function handleMouseMove(event) {

        var x = event.pageX;
        var y = event.pageY;

        $(".cursor-follower").animate({
            left: (x - 16),
            top: (y - 16)
        }, 16);

        $(".cursor").css({
            left: (x - 4),
            top: (y - 4)
        });
    }
});

它相当滞后，动画不是很流畅和轻松。你有其他解决方案吗？

Answer 1

您可以通过CSS过渡实现此效果。在JavaScript中，您只需要更新div的位置。

$(document).on('mousemove', (event) => {
  $('.follower').css({
    left: event.clientX,
    top: event.clientY,
  });
});

.follower {
  width: 20px;
  height: 20px;
  background-color: grey;
  border-radius: 10px;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  position: fixed;
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower"></div>

jQuery：跟踪光标延迟

1 个答案: