You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

滚动时动态切换图片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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.24 18:24:05