鼠標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>