jQuery mousemove - 根据鼠标位置应用 CSS 过滤器

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 过滤器

jQuery mousemove - applying CSS filter based on mouse position

css

jquery

filter

mousemove