我想改变基于鼠标位置的背景色

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