Question

我正在尝试设置一个非常简单的mousemove事件，它根据鼠标位置将 filter：（XXdeg） CSS应用于我的背景div。我以前用背景颜色成功完成了这项工作，但它似乎不适用于过滤器属性。

这就是我所拥有的：

$(document).mousemove(function(e){
    var $width = ($(document).width())/255;
    var $height = ($(document).height())/255;
    var $pageX = parseInt(e.pageX / $width,10);
    var $pageY = parseInt(e.pageY / $height,10);
    $(".bg").css("filter", "hue-rotate(" + (255 - $pageX) + ")");
});

如果有人可以指出我可能出错的地方，我将非常感激。已应用此代码的网页位于：http://www.joe-goddard.com

谢谢！

Answer 1

您必须指定哪个单位为255，在这种情况下为deg（度）。

 $(".bg").css("filter", "hue-rotate(" + (255 - $pageX) + "deg)");

Working codepen example

Answer 2

我刚试过那段代码，你唯一遗漏的就是过滤器值之后的“deg”单位。

var $document = $(document);

$document.mousemove(function(e) {
    var width = $document.width() / 255;
    var pageX = e.pageX / width;
    var value = 255 - pageX;

    $(".bg").css("filter", "hue-rotate(" + value + "deg)");
});

jQuery mousemove - 基于鼠标位置应用CSS过滤器

2 个答案: