Техника Web-дизайна для студента
Описание динамических фильтров
Рассмотрим виды динамических фильтров, а также примеры их применения.
О Barn (motion=3Ha4eHne, orientation=3Ha4eHne, duration= значение) — создает эффект вертикальных (orientation= vertical) или горизонтальных (orientation=horizontal) задергивающихся (motion=in) ИЛИ раскрывающихся (motion=out) штор. Параметр duration предназначен для задания времени перехода в секундах из одного состояния изображения в другое и используется во всех динамических фильтрах. Пример применения фильтра для замены одного рисунка другим с применением эффекта приведен в листинге 9.5.
Листинг 9.5. Пример применения фильтра Barn для замены одного рисунка другим с применением эффекта
<html>
<head>
<title>flHHaMH4ecKnii 4>mibTp</title>
<script>
Nomber_l="l. jpg" nomber_2="2.jpg"
S=0
Function prl()
{
Picl. filters[0].apply() if (s==0) {picl. src=nonber_2; s=l} else {picl. src=nonber_l; s=0} picl. filters[0].play()
}
</script>
</head>
<body>
<img id=picl style="position: absolute; top: 26; left: 190;
Filter: progid:DXImageTransform. Microsoft. Bam (motion=in, orientation=vertical, duration=5)"
Src=l. jpg>
<div style="position: absolute; top: 300; left:250">
<input type="button" value="Pl3MeHMTb" name="KNl" on - click="prl()">
</div>
</body>
</html>
К графическому изображению с уникальным именем picl, заданным в параметре ю, применен фильтр ваш со временем перехода 5 с.
В начале программы-сценария переменным nomber_i и nomber_2 присваиваются имена файлов рисунков, которые должны сменять друг друга с применением эффекта. Переменной s, которая играет роль "флажка", присваивается начальное значение 0. Функция prl ( ) предназначена для управления переходом от одного рисунка к другому. В первой строке функции указывается: имя объекта, к которому применен фильтр (picl), имя фильтра (filters [0] ), которое в данном случае означает, что из семейства примененных фильтров выбирается с порядковым номером 0, и применяемый метод (applyо). Метод apply() зафиксирует изображение того рисунка, который к моменту вызова функции является видимым.
Далее при помощи оператора условного перехода и "флажка" организовано поочередное изменение имени файла изображения. Например, при первом вызове функции prl ( ) имя файла изображения получит значение nomber_2, а флажок изменит свое значение на единицу. При следующем вызове функции значением выражение s==Q будет false, следовательно, имя файла изображения получит значение nomber_i, а флажок снова приобретет значение 0.
Следующая запись pici. filters[0] .playо означает применение фильтра. Так как имя файла изображения перед этим было изменено, то после применения фильтра появится новое изображение с применением эффекта перехода. Вызов функции осуществляется после щелчка по кнопке с надписью Изменить.
О Blinds (bands=3Ha4eHMe, direct1оп=значение, duration= значение) — создает эффект жалюзи:
• горизонтальных, открывающихся вниз (direction=up);
• горизонтальных, открывающихся вверх (direction=down);
• вертикальных, открывающихся вправо (direction=right);
• вертикальных, открывающихся влево (direction=ieft). Параметр bands позволяет задать количество полос.
О CheckerBoard (direction=3Ha4eHMe, squaresX=3Ha4eHMe, squaresY=3Ha4eHMe, durвt1оп=значение) — создает эффект "шахматной доски". Параметр direction позволяет задать направление раскрытия клеток и может принимать значения: up, down, right, left. С ПОМОЩЬЮ параметров squaresX И squaresY можно задать количество клеток по горизонтали и вертикали.
О Fade (overlap=3Ha4eHMe, durвt1оп=значение) — создает эффект плавного исчезновения старого изображения и появления нового. Параметр overlap может принимать значения от 0.0 до 1.0 и влияет на степень одновременного присутствия двух изображений. При overiap=l с началом исчезновения старого изображения уже появляется новое. При overiap=Q старое изображение исчезает полностью и после этого начинает появляться новое.
О GradientWipe (gradients1ге=значение, wipestyle=3Ha4e - ние, пкЛ1оп=значение, durвt1оп=значение) — создает эффект развертки нового изображения на фоне старого. Параметр gradientsize может принимать значения от 0.0 до 1.0 и позволяет регулировать степень размытости границы между старым и новым изображениями. Значение 0 соответствует максимально резкому переходу, а значение 1 — максимально размытой границе. Параметр wipestyie может принимать два значения: 0 — развертка слева направо, 1 — сверху вниз. Параметр motion также может принимать только два значения: forward — развертка в заданном направлении, reverse — развертка в направлении, обратном заданному, в параметре wipestyie, т. е. справа налево или снизу вверх.
О inset (duration=3Ha4eHMe) — создает эффект диагональной развертки из левого верхнего угла в правый нижний. Других параметров не имеет.
О Iris (irisstyle=3Ha4eHMe, то^оп=значение, duration= значение) — создает эффекты переходов различной формы и направленных внутрь изображения или наружу. Параметр irisstyle позволяет изменять форму перехода и может принимать значения: diamond — ромбовидный, circle — в виде окружности, cross — Х-образный, plus — крестообразный, square — прямоугольный, star — звездообразный. Параметр motion задает направление перехода: in — внутрь изображения, out — наружу.
О Pixelate (maxsquare=3Ha4eHMe, durвt1оп=значение) — создает эффект перехода путем объединения соседних пикселей изображения в квадратные ячейки с однородной заливкой. Параметр maxsquare позволяет задать максимальный размер ячейки в пикселях и может принимать значения от 2 до 50.
О RadialWipe (wipestyle=3Ha4eHMe, duration=3Ha4eHMe) — создает эффект радиальной развертки. Параметр wipestyie может принимать значения: clock — вращение радиуса, напоминающее вращение стрелки часов, wedge — вращение двух радиусов в виде расширяющегося клина, radiai — вращение радиуса относительно левого верхнего угла изображения.
О RandomBars (orientation=3Ha4eHMe, duration=3Ha4eHMe) — создает эффект перехода путем появления случайных горизонтальных или вертикальных полос. Параметр orientation может принимать значения: horizontal — горизонтальные полосы, vertical — вертикальные полосы.
О RandomDissolve (durвt 1оп=значение) — создает эффект поточечного проявления нового изображения на месте старого. Других параметров не имеет.
О Slide (slidestyle=3Ha4eHMe, bands=3Ha4eHMe, duration=
Значение) — создает эффект сдвига старого изображения и появления нового. Параметр slidestyle может принимать значения: hide — двигается только старое изображение, push — двигаются оба изображения в одну сторону, swap — оба изображения двигаются в разные стороны. Параметру bands можно присвоить значения от 1 до 50, что приведет к делению изображений во время перехода на соответствующее число горизонтальных полос.
О Spiral (grids1геХ=значение, grids1геУ=значение, dura - 11оп=значение ) — создает эффект смены изображений путем развертки по спирали. Параметры gridsizex и gridsizeY позволяют задать, на сколько частей будет поделено изображение по горизонтали для определения ширины вертикального витка и на сколько — по вертикали для определения ширины горизонтального витка, и могут принимать значения от 1 до 100.
О Stretch (stretchstyle=3Ha4eHMe, duration=3Ha4eHMe) — создает эффект растягивания изображений. Параметр stretchstyle может принимать значения: hide — новое изображение растягивается от левого края, а старое остается неподвижным; push — новое изображение растягивается от левого края, а старое сжимается к правому краю; spin — новое изображение растягивается от центра к левому и правому краям.
О Strips (то^оп=значение, duration=3Ha4eHMe) — создает эффект развертки по диагонали. Параметр motion задает направление развертки: leftup — влево-вверх, leftdown — влево-вниз, rightup — вправо-вверх, rightdown — вправо-вниз.
О Wheel (spokes=3Ha4eHne, durвt1оп=значение) — создает эффект "мельницы". Параметр spokes задает число секторов, в которых одновременно происходит смена изображения, и может принимать значения от 2 до 20.
О Zigzag (gridsizeX=3Ha4eHne, gridsizeY=3Ha4eHne, dura - tion=3Ha4eHne) — создает эффект зигзагообразной замены одного изображения другим. Параметры gridsizex и grid - size y позволяют задать размеры прямоугольника, который, перемещаясь зигзагообразно, формирует новое изображение. Параметр gridsizex задает количество частей, на которое нужно разбить изображение по горизонтали для определения горизонтального размера прямоугольника, а параметр grid - sizeY — вертикального размера прямоугольника. Параметры могут принимать значения от 1 до 100.
