Задача: изучить принцип работы фильтра revealTrans и найти ему полезное применение
На данный момент большинство фильтров поддерживается только в Internet Explorer. Есть свои аналоги фильтров в Gecko, но они имеют другой синтаксис и не так разнообразны. Опера наиболее отсталая в этом отношении, только с восьмой версии у неё появилась поддержка alpha-opacity. Так что код приводимый ниже будет работоспособен только в ИЕ, если это не пофиксят в последующих версиях браузеров от Mozilla и Opera.
Фильтр revealTrans сопровождает смену одного изображения на другое разнообразными спецэффектами, а с помощью тега META позволяет применять те же эффекты при переходе между страницами.
Чтобы убедиться в этом своими глазами, откройте пример работы фильтра revealTrans в браузере Internet Explorer.
Смена изображений со спецэффектом осуществляется довольно просто. На тег <IMG> вешается стиль с фильтром revealTrans. У него имеется два параметра: duration — время в секундах, за которое срабатывает спецэффект и transition — число от 0 до 23, которое указывает какой именно эффект применяется. Например:
Коды спецэффектов и их краткое описание:
| Код | Описание |
|---|---|
| 0 | перемещение в прямоугольное поле |
| 1 | перемещение из прямоугольного поля |
| 2 | в круг |
| 3 | из круга |
| 4 | стирание вверх |
| 5 | стирание вниз |
| 6 | стирание справа |
| 7 | стирание слева |
| 8 | вертикальные жалюзи |
| 9 | горизонтальные жалюзи |
| 10 | шахматы поперек |
| 11 | шахматы вниз |
| 12 | случайное растворение |
| 13 | вертикальная разбивка внутрь |
| 14 | вертикальная разбивка наружу |
| 15 | горизонтальная разбивка внутрь |
| 16 | горизонтальная разбивка наружу |
| 17 | ленты налево вниз |
| 18 | ленты налево вверх |
| 19 | ленты направо вниз |
| 20 | ленты направо вверх |
| 21 | случайные горизонтальные линии |
| 22 | случайные вертикальные линии |
| 23 | один из перечислымных эффектов - рандом |
Для применения фильтра пишем простую JavaScript-функцию, которая использует 2 метода:
- Apply — приостанавливает работу фильтра, для переназначения параметров;
- Play — запускает работу фильтра;
- также существует третий метод Stop, полностью останавливающий работу фильтра;
var img = document.getElementById("imgId");
img.filters.revealTrans.Apply();
img.src = img.src.indexOf("1.gif") != -1 ? "/i/bitcode2.gif" : "/i/bitcode1.gif";
img.filters.revealTrans.Play();
return false;
}
При переходе на другую страницу также можно применять фильтр revealTrans, для этого необходимо прописать следующие META-теги:
<meta http-equiv="page-enter" content="RevealTrans(Duration=1, Transition=23)">
<!-- Для спецэффекта, когда пользователь покидает страницу -->
<meta http-equiv="page-exit" content="RevealTrans(Duration=1, Transition=23)">
Немного о blendTrans
Существует очень похожий и немного более популярный фильтр blendTrans. Он обладает теми же методами и задается только с параметром duration. Этот фильтр сопровождает переход спецэффектом изменения прозрачности.
О пользе свежего воздуха
Реальной пользы от рассмотренного фильтра мало. Его применение носит исключительно украшательный характер, да и работает только в ИЕ. Однако, для различных фотогалерей можно включить его в настройки смены изображений, и при желании пользователь им воспользуется. Возможно вы найдете оригинальное применение сами. Успехов!
