удаление оттенков серого css фильтра из изображений с помощью javascript

Я пытаюсь перебирать некоторые изображения и удалять из них фильтр по одному.удаление оттенков серого css фильтра из изображений с помощью javascript

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

Этот код в данный момент не работает.

источник

2015-12-13 Ollie_W

Похоже, что вам нужно капитализировать «F» в webkitFilter собственности:

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

Chrome still requires-webkit префикс для filter property, но он должен был уже работал в Firefox.

Если вы хотите, чтобы петли по элементам и удалить фильтр из текущего элемента и добавить его обратно к предыдущему элементу, то вы можете использовать следующие:

i % images.length - Это будет получить индекс текущего элемента, а затем вернуться к 0, когда i превышает количество изображений.
(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" />

источник

2015-12-13 01:49:32

Спасибо! Я никогда не пробовал использовать префиксные стили с Javascript раньше, поэтому не был уверен в этом. Код теперь работает, хотя и не так, как я надеялся. Это ungreyscaling мои изображения один за другим, но затем оставляя их все без привязки, а не только позволяя цвету/ungrey. –

@Ollie_W Нравится? http://jsfiddle.net/qvz1c86j/ –

Я понятия не имею, как вы сработали, но это выглядит идеально! –

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

источник

2015-12-15 09:17:32

удаление оттенков серого css фильтра из изображений с помощью javascript

ответ

Смежные вопросы