GradientWipe

We use cookies. Read the Privacy and Cookie Policy

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>