javascript - CSS js on mousemove重画而不消失

Question

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

Answer 1

两项优化可以解决您的问题:

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

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