使用JavaScript从图像中去除灰度CSS滤镜

Question

我正在尝试循环显示一些图片，并逐个去除它们上面的滤镜。

var h = 0;

function removeGreyscale() {
  document.images[h].style.webkitfilter = "grayscale(0)";
  document.images[h].style.filter = "grayscale(0)";
  h += 1;
  if (h === 8) {
    h = 0;
  }
}

setInterval(removeGreyscale, 3000);

这段代码目前无法正常工作。

- Ollie_W

Answer 1

看起来你需要将webkitFilter属性中的'f'大写：

document.images[h].style.webkitFilter = "grayscale(1)";
document.images[h].style.filter = "grayscale(1)";

Chrome 仍需要 使用 -webkit 前缀来使用 filter 属性, 但在Firefox中应该已经可以正常工作了。

---

如果您想遍历元素并从当前元素中删除过滤器并将其添加回上一个元素，则可以使用以下内容：

• i % images.length - 这将获取当前元素的索引，当 i 超过图像数量时将重置为 0。

• (curr - 1 < 0 ? images.length : curr) - 1 - 同样地，这将通过从当前索引中减去 1 或从图像总数中减去 1（如果索引是 -1）来获得前一个元素。

显然最好在此处添加/删除/切换类并避免内联样式，但无论如何，这对于示例目的都可以工作：

var images = document.querySelectorAll('img'),
    i = 0;

function removeGreyscale() {
  var curr = i % images.length,
      prev = (curr - 1 < 0 ? images.length : curr) - 1;
      
  // Remove grayscale filter from the current element
  images[curr].style.webkitFilter = "grayscale(0)";
  images[curr].style.filter = "grayscale(0)";
  
  // Add grayscale filter to the previous element
  images[prev].style.webkitFilter = "grayscale(1)";
  images[prev].style.filter = "grayscale(1)";
  i++;
}

setInterval(removeGreyscale, 1000);

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

<img src="//placehold.it/200/f00" />
<img src="//placehold.it/200/0f0" />
<img src="//placehold.it/200/00f" />

- Josh Crozier

---

谢谢！我以前从未尝试过在Javascript中使用前缀样式，所以对此感到不确定。虽然代码现在可以工作，但它并不像我希望的那样。它会逐个取消图像的灰度，但然后将它们全部保持为非灰度状态，而不是只允许一个被着色/取消灰度。 - Ollie_W

我不知道你是怎么做到的，但看起来完美无缺！ - Ollie_W

Answer 2

CSS的解决方案： http://jsfiddle.net/t2zaf1fk/2/ HTML：

<img src="//placehold.it/200/f00" />
<img src="//placehold.it/200/0f0" />
<img src="//placehold.it/200/00f" />

CSS：

img {
    -webkit-animation: fade 3s linear 0 infinite;
    -webkit-filter: grayscale(1);        
}
img:nth-child(1) {
    -webkit-animation-delay:1s;
}
img:nth-child(2) {
    -webkit-animation-delay:2s
}
@-webkit-keyframes fade {
    0% {
        -webkit-filter: grayscale(1);    
    }
    65% {
        -webkit-filter: grayscale(1);    
    }
    66% {
        -webkit-filter: none;    
    }
    100% {
        -webkit-filter: none;    
    }
}

- Scott van Looy