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