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

我想根据鼠标位置更改背景颜色

2 个答案: