Динамические фильтры

Работает только в Internet Explorer!

Динамические фильтры (переходы состояний) особенно удобны при слайд-шоу.

Для применения динамического фильтра необходимо добавить следующий тег META:

загрузкa страницы <META Http-equiv="Page-Enter" CONTENT="имя_фильтра([атрибуты])">
переход на другую страницу <META Http-equiv="Page-Exit" CONTENT="имя_фильтра([атрибуты])">
посещение сайта <META Http-equiv="Site-Enter" CONTENT="имя_фильтра([атрибуты])">
переход на другой сайт <META Http-equiv="Site-Exit" CONTENT="имя_фильтра([атрибуты])">

Начиная с браузера Internet Explorer 5.0 реализованы динамические фильтры blendTrans и revealTrans.

blendTrans - Создает эффект выцветания старого и проявления нового изображения.

Синтаксис:

filter:blendTrans(Duration=float, Overlap=0.0-1.0)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Overlap число от 0.0 до 1.0, определяющее какую часть времени, указанного в атрибуте Duration, одновременно видны и старое, и новое изображения; по умолчанию - 1.0

Duration: Overlap:

revealTrans - Может создавать множество эффектов.

Синтаксис:

filter:revealTrans(Duration=float, Transition=1-23)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Transition вид эффекта
1-22 - определенный эффект
23 - случайный эффект

Duration: Transition:

Начиная с браузера Internet Explorer 5.5 реализован ряд динамических фильтров, при использовании каждого из которых перед именем обязательно ставится
progid:DXImageTransform.Microsoft.

Например, при загрузке страницы:

<META Http-equiv="Page-Enter" 
  CONTENT="progid:DXImageTransform.Microsoft.имя_фильтра([атрибуты])">

Barn - Создаёт эффект раздвижных ворот.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Barn(Duration=float, Motion=out|in, Orientation=horizontal|vertical)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Motion направление движения
out - ворота раскрываются; по умолчанию
in - ворота закрываются
Orientation ориентация линий перехода
horizontal - горизонтальные линии перехода
vertical - вертикальные линии перехода; по умолчанию

Например:

<meta http-equiv="Page-Enter" 
	content="progid:DXImageTransform.Microsoft.Barn
	(Duration=2, Motion='in', Orientation='horizontal')">

Duration: Motion:
Orientation:

Blinds - Cоздает эффект жалюзи.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Blinds(Bands=integer, Direction=up|down|right|left, Duration=float)

где:

Атрибут Описание
Bands число полос жалюзи; по умолчанию - 10
Direction направление движения
up - вверх
down - вниз; по умолчанию
right - вправо
left - влево
Duration время выполнения фильтра в секундах

Duration: Bands:
Direction:

CheckerBoard - Cоздает эффект шахматной доски.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.CheckerBoard(Direction=up|down|right|left, Duration=float, SquaresX=2-20, SquaresY=integer>2)

где:

Атрибут Описание
Direction направление движения
up - вверх
down - вниз
right - вправо; по умолчанию
left - влево
Duration время выполнения фильтра в секундах
SquaresX число столбцов (от 2 до 20); по умолчанию - 12
SquaresY число строк (от 2); по умолчанию - 10

Duration: Direction:
SquaresX: SquaresY:

Fade - Создает эффект выцветания старого и проявления нового изображения.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Fade(Duration=float, Overlap=0.0-1.0)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Overlap число от 0.0 до 1.0, определяющее какую часть времени, указанного в атрибуте Duration, одновременно видны и старое, и новое изображения; по умолчанию - 1.0

Duration: Overlap:

GradientWipe - Создает эффект градиентного стирания изображения.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.GradientWipe(Duration=float, GradientSize=0.0-1.0, Motion=forward|reverse, WipeStyle=1|2)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
GradientSize число от 0.0 до 1.0, определяющее, какую часть изображения покрывает зона градиента; по умолчанию - 0.25
Motion направление движения
forward - направо или вниз; по умолчанию
reverse - налево или вверх
WipeStyle ориентация
0 - по горизонтали; по умолчанию
1 - по вертикали

Duration: GradientSize:
Motion: WipeStyle:

Inset - Создает эффект вставки от левого верхнего угла.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Inset(Duration=float)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах

Duration:

Iris - Создает эффект расширяющегося или сужающегося "отверстия" в изображении.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Iris(Duration=float, IrisStyle=diamond|circle|cross|plus|star, Motion=out|in)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Motion направление движения
out - от центра к границам; по умолчанию
in - от границ к центру
IrisStyle форма "отверстия"
diamond - ромб
circle - круг
cross - Х-форма
plus - "плюс"-форма; по умолчанию
star - звезда

Duration: Motion:
IrisStyle:

Pixelate - Создает эффект "разъедания" пикселей старого изображения.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Pixelate(Duration=float, MaxSquare=2-50)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
MaxSquare максимальная ширина в пикселях pixelated-квадрата (от 2 до 50);
по умолчанию - 50

Duration: MaxSquare:

RadialWipe - Создает эффект лучевого стирания изображения.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.RadialWipe(Duration=float, WipeStyle=clock|radial|wedge)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
WipeStyle метод показа нового изображения
clock - луч, выходящий из центра вверх, перемещается по часовой стрелке; по умолчанию
radial - луч, выходящий из верхнего левого угла, перемещается по часовой стрелке
wedge - два луча, выходящие из центра вверх, перемещаются в обоих направлениях

Duration: WipeStyle:

RandomBars - Создает эффект полос случайной ширины.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.RandomBars(Duration=float, Orientation=horizontal|vertical)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Orientation ориентация линий перехода
horizontal - горизонтальные линии перехода; по умолчанию
vertical - вертикальные линии перехода

Duration: Orientation:

RandomDissolve - Создает эффект случайного растворения.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.RandomDissolve(Duration=float)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах

Duration:

Slide - Cоздает эффект смены слайдов по горизонтали.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Slide(Bands=integer, Duration=float, SlideStyle=hide|push|spin)

где:

Атрибут Описание
Bands число зон, на которые разделено изображение во время перехода; по умолчанию - 1
Duration время выполнения фильтра в секундах
SlideStyle метод показ нового изображения
hide - новое изображение лежит под сдвигающимся старым; по умолчанию
push - старое изображение, сдвигаясь, тянет за собой новое
swap - старое изображение подкладывается под новое

Duration: Bands:
SlideStyle:

Spiral - Cоздает эффект смены изображения по спирали.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Spiral(Duration=float, GridSizeX=1-100, GridSizeY=1-100)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
GridSizeX число столбцов сетки, используемой для фильтра (от 1 до 100); по умолчанию - 16
GridSizeY число строк сетки, используемой для фильтра (от 1 до 100); по умолчанию - 16

Duration:
GridSizeX: GridSizeY:

Stretch - Cоздает эффект растягивающегося изображения.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Stretch(Duration=float, StretchStyle=hide|push|spin)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
StretchStyle метод показ нового изображения
hide - новое изображение растягивается над старым слева направо
push - новое изображение растягивается слева направо, сжимая старое
spin - новое изображение растягивается над старым от центра; по умолчанию

Duration: StretchStyle:

Strips - Cоздает эффект лоскута, накрывающего по диагонали старое изображение.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Strips(Duration=float, Motion=leftdown|leftup|rightdown|rightup)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Motion направление движения
leftdown - в левый нижний угол; по умолчанию
leftup - в левый верхний угол
rightdown - в правый нижний угол
rightup - в правый верхний угол

Duration: Motion:

Wheel - Cоздает эффект вращающегося колеса.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.Wheel(Duration=float, Spokes=2-20)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
Spokes число клиньев (от 2 до 20); по умолчанию - 4

Duration: Spokes:

ZigZag - Cоздает эффект смены изображения по зигзагу.

Синтаксис:

filter:progid:DXImageTransform.Microsoft.ZigZag(Duration=float, GridSizeX=1-100, GridSizeY=1-100)

где:

Атрибут Описание
Duration время выполнения фильтра в секундах
GridSizeX число столбцов сетки, используемой для фильтра (от 1 до 100); по умолчанию - 16
GridSizeY число строк сетки, используемой для фильтра (от 1 до 100); по умолчанию - 16

Duration:
GridSizeX: GridSizeY:

Применение динамических фильтров к отдельным объектам

Рассмотрим этот вопрос на примере фильтра Pixelate.

Прежде всего отметим, что кроме описанных выше атрибутов динамические фильтры имеют еще один атрибут Enabled, который может принимать значение false (фильтр "заперт") или true (фильтр "открыт").

В сценариях JavaScript динамические фильтры выступают как объекты, имеющие свойства и методы. Свойства по своему названию и содержанию совпадают с соответствующими атрибутами фильтра.

Методы фильтра Pixelate:

Метод Описание
Apply( ) фиксирует начальное изображение объекта
Play( ) запускает переход
Stop( ) останавливает переход

К объекту можно применить несколько фильтров. В этом случае объект имеет свойство filters, которое является массивом применяемых фильтров.

Пример



Text
Text
Text

Код:

<SCRIPT LANGUAGE="JavaScript">
<!--
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply(); 
// После установки метода Apply изменения объекта oDiv 
// не происходит, пока не вызван метод Play.
    if (bToggle) {
        bToggle = 0;
        oDiv.style.visibility="visible";  }  
    else {
        bToggle = 1;
        oDiv.style.visibility="hidden"; }
    oDiv.filters[0].Play();
}
//-->
</SCRIPT>
<BUTTON onclick="fnToggle()">Применить</BUTTON>
<BR><BR>
  <DIV ID="oDiv" STYLE="width:100px; 
    background-color:lightblue;
    filter:progid:DXImageTransform.Microsoft.Pixelate
    			(duration=3,enabled='false');">
<CENTER><H1>Text<BR>Text<BR>Text</H1></CENTER>
</DIV>
Читать дальше: Включение кода на стороне сервера. SSI
.

Популярное:


Содержание:


Новое за неделю



Сейчас на сайте: 3381
Rambler's Top100