Javascript CSS-js在mousemove上重画而不消失

我用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
});

.circle{
位置：绝对位置；
宽度：100px；
高度：100px；
边界半径：50px；
边框：1px实心#000
}
$（窗口）.mousemove（函数（e）{
var x=e.clientX；
变量y=e.clientY；
$（“.circle”）.css（“左”，x-50）；/-50表示中心，因为圆宽度=100
$（“.circle”）.css（“顶部”，y-50）；/-50表示中心，因为圆高度=100
});

---

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

在mousemove之前的变量中缓存

$（“.circle”）

使用

transform:translate3d（x，y，z）

而不是左+上

---

请参阅：

另一种方法是使用动画，而不是@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>

$（窗口）.mousemove（函数（e）{
var x=e.clientX；
x=x-50；
变量y=e.clientY；
y=y-50；
$（“.circle”）.animate（{“left”：x+“px”，“top”：y+“px”}，0）；
});

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

---

顺便说一句，我在Chrome和Firefox以及MAC上试过你的代码，但我看不出它能更快地移动光标。

试试jquery animate（）