Tôi muốn thay đổi màu sắc của nền dựa trên vị trí chuột

Question

Đây là mã của tôi:

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

Đây là loại công trình, ngoại trừ MouseMove dường như không làm mới mỗi khi nó được di chuyển. Nó có vẻ tụt hậu, có một số thiết lập mà tôi đang thiếu? Trang x và trang y được nhân với kích thước tương đối của tài liệu là 255, để toàn bộ phổ đang được sử dụng. Cảm ơn.

Answer 1

Có thể vì bạn đang nhận được phân số trở lại.

Hãy thử:

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

jsFiddle example

Answer 2

Mã của bạn chạy mọi chuột di chuyển số lượng nhỏ, vì vậy hết sức mình để giữ bất kỳ mã trong sự kiện gọi lại ở mức tối thiểu để nó có thể chạy như nhanh nhất có thể để tránh tụt hậu. Do đó, tốt hơn là chỉ nên tính toán một điều trong một dịp duy nhất. Vì vậy, một cái gì đó như thế này sẽ tốt hơn một chút:

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

Nếu bạn muốn mã để đáp ứng với kích thước màn hình khác nhau thì bạn có thể chỉ cần thêm một 'thay đổi kích thước' sự kiện vào tài liệu đó sẽ thiết lập lại các biến w và h khi cần thiết.

Như là một điểm bên nó cũng có thể được nhanh hơn để gán màu nền natively mà không jquery:

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