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>

鼠标XY可更改图像饱和度

1 个答案: