Barn()
Создает эффект "открывающейся и закрывающейся двери".
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает или возвращает направление преобразования: по вертикали или по горизонтали.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold"; } else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR>
<BR>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Barn( duration=2, motion=out, orientation=vertical);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden"; } else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Barn
Barn()
Создает эффект "открывающейся и закрывающейся двери".
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает или возвращает направление преобразования: по вертикали или по горизонтали.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold"; } else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR>
<BR>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Barn( duration=2, motion=out, orientation=vertical);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden"; } else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Blinds
Blinds()
Создает эффект "открывающихся и закрывающихся жалюзи"
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает направление, в которое происходит открытие полосок.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // Устанавливаем случайное число "шторок". oDiv.filters[0].bands = Math.random()*12 + 3; // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play(duration=3);}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Blinds( direction=down);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Blinds(bands=2, direction=RIGHT) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
CheckerBoard
Fade()
Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает время одновременного показа старого содержимого объекта и нового относительно общей продолжительности работы фильтра.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Fade( duration=2);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Fade
Fade()
Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает время одновременного показа старого содержимого объекта и нового относительно общей продолжительности работы фильтра.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Fade( duration=2);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
GradientWipe
GradientWipe()
Создает наползание нового содержимого элемента страницы на старое, причем граница выглядит как градиентная полоса
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает часть площади элемента страницы, которая будет покрыта градиентной полосой.
Задает или возвращает направление преобразования: прямое или обратное.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Задает или возвращает направление преобразования: по горизонтали или по вертикали.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="orange";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.gradientWipe( duration=3, gradientsize=0.5);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Wipe( GradientSize=1.0, wipeStyle=0, motion=forward) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2</DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play(duration=2);}</SCRIPT>
Inset
Inset()
Новое содержимое элемента страницы диагонально заменяет старое
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play(duration=2); // Set duration as a parameter of Play.}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Inset( );"></DIV>
Пример 2: <SCRIPT>var bTranState = 0;function fnToggle() {oDIV2.filters[0].Apply();if (bTranState) { bTranState = 0;oDIV2.style.visibility="hidden"; }else { bTranState = 1;oDIV2.style.visibility="visible"; }oDIV2.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;background:gold"> This is DIV #1 </DIV>
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; filter:progid:DXImageTransform.Microsoft.Inset()">
<BR>This is DIV #2</DIV>
Iris
Iris()
Создает эффект радужной оболочки глаза, подобной открытию объектива камеры
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает форму лепестков.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>
<!-- Задаем массив с возможными значениями параметра IrisStyles. -->var arrIrisStyles = new Array();arrIrisStyles = [DIAMOND,CIRCLE,CROSS,PLUS,SQUARE,STAR];var iIndexCount = 0;var bToggle = 0;function fnToggle() {
<!-- Используем массив для отображения параметра IrisStyles. -->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;}</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<BR/>
<BR/><FONT SIZE="+4" >
<!-- This DIV is the target of the transition. -->
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Iris( duration=3);"> TEXT
<BR/>TEXT
<BR/>TEXT
<BR/>TEXT
<BR/> </DIV><SPAN ID="oSpan"></SPAN>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Iris(irisStyle=SQUARE, motion=in) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Pixelate
Pixelate()
Старое содержимое элемента страницы рассыпается на отдельные пикселы, а новое содержимое собирается из отдельных пикселов
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод 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/><FONT SIZE="+4">
<DIV ID="oDiv" STYLE="width:100px; background-color: lightblue; filter:progid:DXImageTransform.Microsoft.Pixelate( duration=3, enabled=false);"> Text
<BR/>Text
<BR/>Text
<BR/> </DIV></FONT>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50, Duration=1, Enabled=false) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].enabled = true; oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
RadialWipe
RadialWipe()
Старое содержание элемента радиально стирается, наподобие стиранию дворниками на стекле, а новое появляется
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает метод, которым будет показываться новое содержимое.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>
<!-- Declare an array and index counter to access wipeStyles. -->var arrWipeStyles = new Array();arrWipeStyles = [CLOCK,WEDGE,RADIAL];var iIndexCount = 0;var bToggle = 0;function fnToggle() {
<!-- Используем массив для изменения и отображения WipeStyle -->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;}</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<BR/>
<BR/><FONT SIZE="+4" >
<!-- Этот DIV является целью перехода -->
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RadialWipe( duration=2);"> TEXT
<BR/>TEXT
<BR/>TEXT
<BR/>TEXT
<BR/> </DIV><SPAN ID="oSpan"></SPAN> </FONT>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=clock) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
RandomBars
RandomBars()
Старое содержимое элемента страницы рассыпается на отдельные линии, а новое содержимое собирается из отдельных линий
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление преобразования.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].orientation="vertical"; oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RandomBars( duration=5);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
RandomDissolve
RandomDissolve()
Создает эффект поточечного появления нового содержимого на месте старого
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод 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="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RandomDissolve( duration=3);"><FONT SIZE="+4" COLOR="#A08000"> TEXT
<BR/>TEXT
<BR/>TEXT
<BR/>TEXT
<BR/></FONT></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.RandomDissolve() ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Slide
Slide()
Старое содержимое элемента страницы сдвигается в сторону, открывая под собой новое содержимое (эффект слайдов)
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает способ замещения старого содержимого элемента страницы новым.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>
<!-- Declare an array and index counter to access slideStyles. -->var arrSlideStyles = new Array();arrSlideStyles = [HIDE,PUSH,SWAP];var iIndexCount = 0;var bToggle = 0;function fnToggle() {
<!-- В массиве задаем значения для параметра slideStyle. -->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;}</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<BR/>
<BR/><FONT SIZE="+4" >
<!-- This DIV is the target of the transition. -->
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Slide( duration=3, bands=8);"> TEXT
<BR/>TEXT
<BR/>TEXT
<BR/>TEXT
<BR/> </DIV><SPAN ID="oSpan"></SPAN> </FONT>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Slide(slideStyle=SWAP, bands=5) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Spiral
Spiral()
Старое содержимое элемента страницы спирально закрашивается новым содержимым
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает ширину закрашивающей полоски по горизонтали.
Задает или возвращает ширину закрашивающей полоски по вертикали.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод 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="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Spiral( duration=3, GridSizeX=25, GridSizeY=25);"><FONT SIZE="+4" COLOR="#A08000"> TEXT
<BR/>TEXT
<BR/>TEXT
<BR/>TEXT
<BR/></FONT></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Spiral(GridSizeX=8, GridSizeY=64) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Stretch
Stretch()
Этот фильтр растягивает новое содержимое элемента страницы, тем самым закрывая старое содержимое
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает способ замещения старого содержания элемента страницы новым.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT<
<!-- Задаем в массиве значения свойства stretchStyles. --<var arrStretchStyles = new Array();arrStretchStyles = [HIDE,PUSH,SPIN];var iIndexCount = 0;var bToggle = 0;function fnToggle() {
<!-- Use the array index to update and display the stretchStyle used. --<var iStyleIndex = iIndexCount%3 ; // MOD function avoids resetting the counter. oDiv.filters[0].stretchstyle = arrStretchStyles[iStyleIndex]; oSpan.innerText = StretchStyle = " + arrStretchStyles[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;}</SCRIPT<
<BUTTON onclick="fnToggle()"<Запустить преобразование</BUTTON<
<BR/<
<BR/<<FONT SIZE="+4" <
<!-- This DIV is the target of the transition. --<
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Stretch( duration=3);"< TEXT
<BR/<TEXT
<BR/<TEXT
<BR/<TEXT
<BR/< </DIV<<SPAN ID="oSpan"<</SPAN< </FONT<
Пример 2: <!-- К этому элементу применяется фильтр. --<
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle=push) "<
<!-- Это первое содержимое, которое будет показано. --<
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"< This is DIV #1 </DIV<
<!-- Это содержимое, которое будет показано после применения фильтра. --<
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; "<
<BR< This is DIV #2 </DIV< </DIV<
<BUTTON onclick="fnToggle()"<Запустить преобразование</BUTTON<
<SCRIPT<var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT<
Strips
Strips()
Новое содержимое элемента страницы диагонально отдельными полосками наползает на старое содержимое
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает угол, из которого появится новое содержимое элемента.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Strips( duration=5, motion=rightdown);"></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Strips(Duration=2, Motion=leftdown) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Wheel
Wheel()
Создает эффект посекторного наползания нового элемента страницы на старый
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold";} else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<BR/>
<BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Wheel( duration=2, spokes=8);"></DIV>
Пример 2: <SCRIPT>var bTranState = 0;function fnToggle() {oDIV2.filters[0].Apply();if (bTranState) { bTranState = 0;oDIV2.style.visibility="hidden"; }else { bTranState = 1;oDIV2.style.visibility="visible"; }oDIV2.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;background:gold"> This is DIV #1 </DIV>
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; filter:progid:DXImageTransform.Microsoft.Wheel(spokes=10)">
<BR>This is DIV #2</DIV>
ZigZag
ZigZag()
Новое содержимое элемента страницы зигзагообразно отдельными полосками заполняет старое
Здесь
sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты Свойства Задает или возвращает количество полосок по горизонтали.
Задает или возвращает количество полосок по вертикали.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1: <SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод 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="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Zigzag( duration=3, GridSizeX=25, GridSizeY=25);"><FONT SIZE="+4" COLOR="#A08000"> TEXT
<BR/>TEXT
<BR/>TEXT
<BR/>TEXT
<BR/></FONT></DIV>
Пример 2: <!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.zigzag(GridSizeX=64, GridSizeY=64) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2</DIV> </DIV>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play(duration=3);}</SCRIPT>