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

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

在mousemove之前的变量中缓存$(".circle")
使用transform: translate3d(x,y,z)代替left + top

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

Answer 2

另一种方法，而不是@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上试用了你的代码，并且我没有看到它在移动光标方面有所下降。

关于mousemove重绘的CSS js没有消失

2 个答案: