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

問題を解決する可能性のある 2 つの最適化:

  1. $(".circle")mousemove の前に変数にキャッシュする
  2. transform: translate3d(x,y,z)left+top の代わりに使用

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

于 2015-01-29T11:50:53.200 に答える