5

这是我的代码：

$(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，从而使用整个频谱。谢谢。

4

2 回答 2

8

可能是因为你得到了分数。

尝试：

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

jsFiddle 示例

于 2013-03-19T20:09:37.317 回答
1

每次鼠标移动最少量时您的代码都会运行，因此最好将该事件回调中的任何代码保持在最低限度，以便它可以尽可能快地运行以避免滞后。因此，最好只在一次情况下计算一件事情。所以这样的事情会好一点：

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+")";
于 2013-03-19T20:17:28.907 回答