使用 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);

此代码目前无效。

Answer 1

webkitFilter 属性:

中的 'f' 好像需要大写

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

Chrome still requires the -webkit prefix for the filter property，但它应该已经在 Firefox 中运行了。

如果你想遍历元素并从当前元素中移除过滤器并将其添加回前一个元素，那么你可以使用以下方法：

i % images.length - 这将获取当前元素的索引，然后在 i 超过图像数量时重置回 0。
(curr - 1 < 0 ? images.length : curr) - 1 - 同样，这将通过从当前索引中减去 1 或从图像总数中减去 1 来获取前一个元素，如果索引是 -1.

显然，在此处 add/remove/toggle 类并避免内联样式会更好，但尽管如此，这仍然适用于示例目的：

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" />

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;    
    }
}

使用 javascript 从图像中删除灰度 css 滤镜

removing greyscale css filter from images with javascript

javascript

css

filter

setinterval