滚动时动态切换图片RGB与灰度模式,回滚无法恢复RGB如何解决?
你当前代码失效的核心原因是else分支逻辑错误:你没有重置filter属性,反而尝试修改图片src,且填写的src链接缺失了开头的h属于无效链接,自然无法恢复彩色效果。
实现灰度和彩色切换不需要更换图片源,只需要动态调整filter的grayscale属性值即可,修正后的代码如下:
let element = document.getElementById("image"); window.onscroll = function() { const scrollLimit = 100; if (window.scrollY >= scrollLimit) { element.style.filter = 'grayscale(1)'; } else { element.style.filter = 'grayscale(0)'; } };
如果需要让切换过程更顺滑,可以给图片添加过渡样式:
#image { /* 0.3秒的渐变过渡,可自行调整时长 */ transition: filter 0.3s ease; }
内容的提问来源于stack exchange,提问作者user17523218
相关产品推荐
相关产品推荐

