Ich möchte die Farbe des Hintergrundes auf Mausposition

Question

Hier mein Code basiert ändern ist:

$(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+")"); 
}); 

Diese Art von Arbeiten, mit Ausnahme der mousemove- jedes Mal nicht aktualisiert scheint es bewegt wird. Es scheint zu zögern, gibt es eine Einstellung, die ich vermisse? Die Seite x und Seite y werden mit der relativen Größe der Dokumente zu 255 multipliziert, so dass das gesamte Spektrum verwendet wird. Vielen Dank.

Answer 1

Wahrscheinlich, weil Sie Brüche zurück erhalten.

Versuchen:

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

jsFiddle example

Answer 2

Ihr Code ausgeführt wird jedes Mal die Maus, um die geringste Menge bewegt, so dass ihr am besten in diesem Fall Rückruf auf das Minimum jeden Code zu halten, damit es so laufen kann so schnell wie möglich, um Verzögerungen zu vermeiden. Es ist daher besser, einmalige Dinge nur einmal zu berechnen. So etwas wie dies wäre ein wenig besser sein:

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+")"); 
}); 

Wenn Sie den Code wollen unterschiedliche Bildschirmgrößen reagieren, dann können Sie einfach fügen Sie ein ‚Resize‘ Ereignis in das Dokument, das die w und h Variablen zurückgesetzt würde, wenn notwendig.

Als Neben Punkt könnte es auch schneller sein, um die Hintergrundfarbe ohne jquery nativen zuweisen:

body.style.backgroundColor = "rgb("+pageX+","+pageY+","+pageX+")";