CSS js 在鼠标移动重绘时不会消失

CSS js on mousemove redraw without disappear

本文关键字：消失 js 鼠标 移动 CSS      更新时间：2023-09-26

我通过鼠标位置在窗口上用CSS画圆。然后我慢慢移动光标，很好的重绘，但如果我移动光标更快，我可以看到圆是如何消失的。如何流畅地重绘而不会消失？

我的代码我在下面尝试什么：

.circle {
    position: absolute;
    width:100px;
    height:100px;
    border-radius:50px;
    border: 1px solid #000
}
<div class="circle"> </div>
$(window).mousemove(function(e) {
    var x = e.clientX;
    var y = e.clientY;
    $(".circle").css("left", x-50); //-50 for center because circle width = 100
    $(".circle").css("top", y-50); //-50 for center because circle height = 100
});

http://jsfiddle.net/rkEMR/3996/

两种优化可以解决您的问题：

  1. 鼠标移动前在变量中缓存$(".circle")
  2. 使用transform: translate3d(x,y,z)而不是左+上

请参阅：http://jsfiddle.net/rkEMR/3998/

另一种方法是使用animate，而不是@zvona所说的也可以用作魅力：

<script>
    $(window).mousemove(function(e) {
        var x = e.clientX;
        x = x-50;
        var y = e.clientY;
        y = y-50;
        $(".circle").animate({"left": x+"px", "top": y+"px"}, 0);
    });
</script>

最后的 0 是转到光标的时间（以毫秒为单位）。例如，您可以使用 10 毫秒使其更平滑。

顺便说一句，我在 Chrome 和 Firefox 上，在 MAC 上尝试了您的代码，我没有看到它更快地移动光标。

相关文章：