我想改變基於鼠標位置的背景色

Question

這裏是我的代碼：

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

這類作品中，除了鼠標移動似乎不刷新每次移動時。它似乎滯後，是否有一些我缺少的設置？頁面x和頁面y將文檔相對大小乘以255，以便使用整個頻譜。謝謝。

Answer 1

可能是因爲你得到分數回來。

嘗試：

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

jsFiddle example

Answer 2

你的代碼運行每次鼠標移動的輕微的量，所以最好在事件回調保留任何代碼到最低，因此它可以爲運行儘可能快地避免滯後。因此，一次只計算一次事物就更好了。因此，像這樣會好一點：

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