2

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

4

2 回答 2

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 上尝试了您的代码，但我看不到它会更快地移动光标。

于 2015-01-29T11:58:12.400 回答
1

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

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

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

于 2015-01-29T11:50:53.200 回答