根据鼠标位置改变背景颜色

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

这个方法基本可行，除了mousemove似乎不能在每次移动时刷新。它似乎有延迟，我是否遗漏了某些设置？页面x和y乘以文档相对大小的255，使整个光谱都被使用。谢谢。

- mpn

Answer 1

可能是因为您收到的是分数。尝试使用以下代码：

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

jsFiddle示例

- j08691

---

无法停止移动鼠标 - 它太丰富多彩了。 :) - insertusernamehere

这实际上比其他答案要容易得多，而且效果也更好。谢谢。 - mpn

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

如果您希望代码响应不同的屏幕尺寸，那么只需向文档添加一个“resize”事件即可在必要时重置“w”和“h”变量。

另外，使用原生方式分配背景颜色可能会更快，而无需使用jQuery。

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

- Coin_op

---

这个完美地运行了，感谢您的帮助，尽管它仍然有点慢，但这已经好多了。 - mpn