鼠标移动上的CSS js重绘而不消失

Posted 2023-02-16

【中文标题】鼠标移动上的CSS js重绘而不消失

【英文标题】：CSS js on mousemove redraw without disappear

【发布时间】：2015-03-28 14:59:22

【问题描述】：

我通过鼠标位置在窗口上用 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/

【问题讨论】：

试试 jquery animate()

【参考方案1】：

另一种方法是使用动画，而不是 @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 毫秒使其更平滑。

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

【参考方案2】：

两项优化可能会解决您的问题：

在鼠标移动之前将$(".circle")缓存在变量中 使用transform: translate3d(x,y,z)而不是left+top

见：http://jsfiddle.net/rkEMR/3998/