Справочник по CSS : Фильтры в Internet Explorer : Динамические фильтры : Stretch

Материал из Справочник Web-языков

• Главная
• CSS
• Фильтры в Internet Explorer
• Динамические фильтры
• Stretch

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	Задает или возвращает способ замещения старого содержания элемента страницы новым. Для свойства доступны следующие значения Hide - новое содержание элемента наползает на старое слева на право (значение по умолчанию) Spin - новое содержание элемента страницы наползает на старое из середины элемента к бокам Push - новое содержание элемента страницы раздвигаясь с левого бока, сжимает старое содержание
duration	Duration	Задает или возвращает продолжительность преобразования в секундах.
enabled	Enabled	Задает или возвращает признак разрешения применения фильтра. Свойство может принимать следующие значения true - разрешает применить фильтр (значение по умолчанию) false - не разрешает
	Percent	Задает процент выполнения преобразования. Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
	Status	Возвращает состояние выполнения преобразования. Свойство может принимать следующие значения 0 - если преобразование было остановлено 1 - если оно было применено 2 - если преобразование выполняется

Методы, которые могут быть применены к фильтру 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<