滚动时将图像动态更改为 rgb 和灰度

Posted 2023-05-08

【中文标题】滚动时将图像动态更改为 rgb 和灰度

【英文标题】：Dynamically changing image to rgb and grayscle when scrolling

【发布时间】：2022-01-05 01:48:13

【问题描述】：

我对 javascript 还是很陌生，并试图在向下滚动时将我的图像从 RGB 转换为灰度，反之亦然。我管理我的图像在滚动时得到灰度值，但是我没有回到 RGB 图像。

我的 JavaScript 代码是：

let element = document.getElementById("image");




window.onscroll = function() 
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) 
    element.style.filter = 'grayscale(1)';
   else 
    element.src =    'ttps://images.unsplash.com/photo-1542903660-eedba2cda473?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80'
    
    
  
;

它也在https://jsfiddle.net/vdszymh7/139/上公开

也许您对如何在这两种模式之间动态切换有一些建议。

【参考方案1】：

你想要达到的目标可以通过这种方式完成：

window.onscroll = function() 
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) 
    element.style.filter = 'grayscale(1)';
    console.log('gray')
   else 
    element.style.filter = 'none'
  
;

【讨论】：

谢谢。就是这样。有时解决方案很简单..

不客气，哥们，你可以给这个解决方案一个upvote..!! ;-)