Chcę zmienić kolor tła w oparciu o pozycji myszy

Question

Oto mój kod:

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

Ten rodzaj robót, z wyjątkiem mousemove zdaje się nie odświeżyć każdym razem jest on przenoszony. Wydaje się, że jest w tyle, czy jest jakieś ustawienie, którego mi brakuje? Strona x i strona y są mnożone przez dokumenty o rozmiarze do 255, tak, że używane jest całe spektrum. Dzięki.

Answer 1

Prawdopodobnie dlatego, że odzyskujesz części.

Spróbuj:

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

jsFiddle example

Answer 2

Twój kod jest uruchamiany za każdym mysz porusza najmniejszej ilości, więc wszelkich starań, aby utrzymać żadnego kodu w tym zwrotnego zdarzenia do minimum, dzięki czemu można go uruchomić jako najszybciej jak to możliwe, aby uniknąć opóźnień. Dlatego lepiej jest wyliczać jedną rzecz tylko przy jednej okazji. Więc coś takiego byłoby trochę lepiej:

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

Jeśli chcesz kod odpowiedzi do różnych rozmiarów ekranu, a następnie można po prostu dodać „resize” zdarzenie do dokumentu, który kasuje w i h zmienne kiedy niezbędny.

Jako punkt bocznego może być również szybciej przypisać kolor tła natywnie bez jQuery:

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