5

これが私のコードです：

$(document).mousemove(function(e){
    var $width = ($(document).width())/255;
    var $height = ($(document).height())/255;
    var $pageX = e.pageX / $width;
    var $pageY = e.pageY / $height;
    $("body").css("background-color", "rgb("+$pageX+","+$pageY+","+$pageX+")");
});

この種の動作は、mousemoveが移動するたびに更新されないように見えることを除いてです。遅れているようですが、足りない設定はありますか？ページxとページyは、255に相対的なサイズのドキュメントで乗算されるため、スペクトル全体が使用されます。ありがとう。

4

2 に答える 2

8

おそらくあなたが分数を取り戻しているからでしょう。

試す：

var $pageX = parseInt(e.pageX / $width,10);
var $pageY = parseInt(e.pageY / $height,10);

jsFiddleの例

于 2013-03-19T20:09:37.317 に答える
1

コードは、マウスがわずかに動くたびに実行されるため、そのイベントコールバック内のコードを最小限に抑えて、遅延を回避するために可能な限り高速に実行できるようにするのが最善です。したがって、1回限りの計算を行う方が適切です。したがって、このようなものは少し良いでしょう：

var w = Math.round($(document).width() / 255);
var h = Math.round($(document).height() / 255);
var body = $("body");

$(document).mousemove(function(e){
    var pageX = Math.round(e.pageX / w);
    var pageY = Math.round(e.pageY / h);
    body.css("background-color", "rgb("+pageX+","+pageY+","+pageX+")");
});

コードをさまざまな画面サイズに応答させたい場合は、ドキュメントに「サイズ変更」イベントを追加するだけで、必要に応じて変数wとh変数をリセットできます。

副次的な点として、jqueryを使用せずにネイティブに背景色を割り当てる方が速い場合もあります。

body.style.backgroundColor = "rgb("+pageX+","+pageY+","+pageX+")";
于 2013-03-19T20:17:28.907 に答える