White cat - Справочник по CSS Страница 10

<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)">