鼠标XY改变图像饱和度

Question

根据鼠标光标的x，y坐标，是否可以将图像的饱和度从0％改变为100％？

因此，当光标在网页的右上角时，右上角的图像将完全饱和，左下角的图像将处于0％饱和度。

任何图像之间的颜色根据鼠标的坐标百分比。
无法在网上找到任何解决方案。

我正在寻找这个代码作为升级到简单的CSS悬停到我目前使用的颜色。

非常感谢！

Answer 1

编写一个JS函数，它跟踪屏幕上的鼠标坐标并将其翻译为所需的百分比。

喜欢的东西：

<img src="https://cdn.pixabay.com/photo/2017/05/14/14/24/grass-2312139_960_720.jpg" 
    width="300px"> 

<script> 
    var x, y, img = $('img'); 

    $(document).mousemove(function(getCurrentPos){ 
    x = getCurrentPos.clientX/window.innerWidth; 
    y = getCurrentPos.clientY/window.innerHeight; 
    $(img).css('filter', 'saturate(' + x*y*100 + ')'); 
    }); 
</script>