Надо отметить, что фильтры отображаются только в браузерах Internet Explorer не ниже 4-ой версии.
Синтаксис:
"filter:имя_фильтра(параметр1=значение, параметр2=значение,...)"
Некоторые фильтры могут быть без параметров.
Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.
Далее будут мною описаны 18 статических и 19 динамических фильтра.
Фильтры применяют через параметр STYLE:
Возьмём картинку (img.gif) и применим к ней фильтр прозрачности:
- имеем ту же картинку, но полупрозрачную.
Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.
JavaScript:
...
Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.
VBScript:
...
Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.
Alpha
Задает уровень прозрачности элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
AlphaImageLoaded
Отображает графическое изображение внутри элемента страницы между его фоном и содержимым.
При настройке этого фильтра можно использовать следующие параметры:
BasicImage
Делает элемент страницы черно-белым, как бы просвеченным рентгеновскими лучами, вращает его.
Отдельно можно задавать угол поворота, стерень "просвеченности".
При настройке этого фильтра можно использовать следующие параметры:
Blur
Делает элемент страницы размытым.
При настройке этого фильтра можно использовать следующие параметры:
Chroma
Делает прозрачным отдельный цвет элемента.
При настройке этого фильтра можно использовать следующие параметры:
Compositor
Объеденяет два цвета элемента страницы и выводит что получилось.
При настройке этого фильтра можно использовать следующие параметры:
DropShadow
Отбрасывает тень у элемента страницы, которая отображается отдельно от самого элемента.
При настройке этого фильтра можно использовать следующие параметры:
Emboss
Делает элемент страницы выпуклым.
При настройке этого фильтра можно использовать следующие параметры:
Engrave
Делает элемент страницы вдавленным.
При настройке этого фильтра можно использовать следующие параметры:
Glow
Создает эффект "тления" элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Gradient
Эффект градиентной закраски элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Light
Создет эффект освещенности элемента страницы.
Методы, применяемые к этому фильтру:
MaskFilter
Отображает прозрачный цвет элемента страницы заданным цветом.
При настройке этого фильтра можно использовать следующие параметры:
Matrix
Изменяет элемент страницы путем изменения размеров, поворотов или инвертируя его при помощи матричных преобразований.
При настройке этого фильтра можно использовать следующие параметры:
"bilinear" (по умолчанию)
MotiobBlur
Создает эффект быстрого движения (размытости).
При настройке этого фильтра можно использовать следующие параметры:
Pixelate
Отображает элемент страницы отдельными пикселами.
При настройке этого фильтра можно использовать следующие параметры:
Shadow
Создает эффект отбрасывания тени у элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Wave
Создает волнистое искажение элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Barn()
Создает эффект "открывающейся и закрывающейся двери".
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает или возвращает направление преобразования: по вертикали или по горизонтали.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
Barn()
Создает эффект "открывающейся и закрывающейся двери".
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает или возвращает направление преобразования: по вертикали или по горизонтали.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
Blinds()
Создает эффект "открывающихся и закрывающихся жалюзи"
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает направление, в которое происходит открытие полосок.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
Fade()
Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает время одновременного показа старого содержимого объекта и нового относительно общей продолжительности работы фильтра.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
Fade()
Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает время одновременного показа старого содержимого объекта и нового относительно общей продолжительности работы фильтра.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
GradientWipe()
Создает наползание нового содержимого элемента страницы на старое, причем граница выглядит как градиентная полоса
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает часть площади элемента страницы, которая будет покрыта градиентной полосой.
Задает или возвращает направление преобразования: прямое или обратное.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Задает или возвращает направление преобразования: по горизонтали или по вертикали.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
Inset()
Новое содержимое элемента страницы диагонально заменяет старое
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
Iris()
Создает эффект радужной оболочки глаза, подобной открытию объектива камеры
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает форму лепестков.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
var arrIrisStyles = new Array();arrIrisStyles = [DIAMOND,CIRCLE,CROSS,PLUS,SQUARE,STAR];var iIndexCount = 0;var bToggle = 0;function fnToggle() {
var iStyleIndex = iIndexCount%6 ; // MOD функция предотвращает // повторную установку счетчика. oDiv.filters[0].irisstyle = arrIrisStyles[iStyleIndex]; oSpan.innerText = IrisStyle = " + arrIrisStyles[iStyleIndex] + "; oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold"; } else { bToggle = 1; oDiv.style.backgroundColor="green"; } oDiv.filters[0].Play(); iIndexCount += 1;}
TEXT
TEXT
TEXT
Пример 2:
This is DIV #2
Pixelate()
Старое содержимое элемента страницы рассыпается на отдельные пикселы, а новое содержимое собирается из отдельных пикселов
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Text
Text
Пример 2:
This is DIV #2
RadialWipe()
Старое содержание элемента радиально стирается, наподобие стиранию дворниками на стекле, а новое появляется
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает метод, которым будет показываться новое содержимое.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
var arrWipeStyles = new Array();arrWipeStyles = [CLOCK,WEDGE,RADIAL];var iIndexCount = 0;var bToggle = 0;function fnToggle() {
var iStyleIndex = iIndexCount%3 ; // MOD function avoids resetting the counter. oDiv.filters[0].wipeStyle = arrWipeStyles[iStyleIndex]; oSpan.innerText = WipeStyle = " + arrWipeStyles[iStyleIndex] + "; oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold"; } else { bToggle = 1; oDiv.style.backgroundColor="green"; } oDiv.filters[0].Play(); iIndexCount += 1;}
TEXT
TEXT
TEXT
Пример 2:
This is DIV #2
RandomBars()
Старое содержимое элемента страницы рассыпается на отдельные линии, а новое содержимое собирается из отдельных линий
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление преобразования.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
RandomDissolve()
Создает эффект поточечного появления нового содержимого на месте старого
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
TEXT
TEXT
TEXT
Пример 2:
This is DIV #2
Slide()
Старое содержимое элемента страницы сдвигается в сторону, открывая под собой новое содержимое (эффект слайдов)
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает способ замещения старого содержимого элемента страницы новым.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
var arrSlideStyles = new Array();arrSlideStyles = [HIDE,PUSH,SWAP];var iIndexCount = 0;var bToggle = 0;function fnToggle() {
var iStyleIndex = iIndexCount%3 ; // MOD function avoids resetting the counter. oDiv.filters[0].slideStyle = arrSlideStyles[iStyleIndex]; oSpan.innerText = SlideStyle = " + arrSlideStyles[iStyleIndex] + "; oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold"; } else { bToggle = 1; oDiv.style.backgroundColor="green"; } oDiv.filters[0].Play(); iIndexCount += 1;}
TEXT
TEXT
TEXT
Пример 2:
This is DIV #2
Spiral()
Старое содержимое элемента страницы спирально закрашивается новым содержимым
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает ширину закрашивающей полоски по горизонтали.
Задает или возвращает ширину закрашивающей полоски по вертикали.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
TEXT
TEXT
TEXT
Пример 2:
This is DIV #2
Stretch()
Этот фильтр растягивает новое содержимое элемента страницы, тем самым закрывая старое содержимое
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает способ замещения старого содержания элемента страницы новым.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Wheel()
Создает эффект посекторного наползания нового элемента страницы на старый
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
Пример 2:
This is DIV #2
ZigZag()
Новое содержимое элемента страницы зигзагообразно отдельными полосками заполняет старое
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает количество полосок по горизонтали.
Задает или возвращает количество полосок по вертикали.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
TEXT
TEXT
TEXT
Пример 2:
This is DIV #2