Справочник по CSS : Фильтры в Internet Explorer : Динамические фильтры : Inset
смотрим также
-
Читал вот на этом сайте интересную статью.
Материал из Справочник Web-языков
Inset()
Новое содержимое элемента страницы диагонально заменяет старое
Синтаксис фильтра Inset():
Где: | Общий пример использования: | Совместимость: |
HTML | <ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Inset(sProperties)" ... > | Internet Explorer 5.5 или выше |
Script | object.style.filter="progid:DXImageTransform.Microsoft.Inset(sProperties)" | Internet Explorer 5.5 или выше |
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Свойства, используемые в фильтре Inset():
Атрибуты Исползуются в HTML | Свойства Исползуются в скриптах | Описание |
duration | Duration | Задает или возвращает продолжительность преобразования в секундах. |
enabled | Enabled | Задает или возвращает признак разрешения применения фильтра.
|
Percent | Задает процент выполнения преобразования. Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено). | |
Status | Возвращает состояние выполнения преобразования.
|
Методы, которые могут быть применены к фильтру Inset():
Метод | Описание |
apply | Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите. Для того, чтобы запустить преобразование, используйте метод Play(). |
play | Запускает преобразование. |
stop | Немедленно останавливает преобразование. |
Примеры использования динамического фильтра Inset():
Пример 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>