鼠标 XY 改变图像饱和度

【问题标题】：Mouse XY to change image saturation鼠标 XY 改变图像饱和度
【发布时间】：2017-06-17 19:17:04
【问题描述】：

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

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

根据鼠标的坐标，将任何图像着色到 %。
在网上找不到任何解决方案。

我正在寻找此代码作为我当前使用的简单 CSS 悬停颜色的升级。

非常感谢！！

【问题讨论】：

也许对你有帮助 > stackoverflow.com/questions/10521978/…

标签： javascript jquery html css

【解决方案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>

【讨论】：

谢谢，会试一试