Partager via

stretchStyle Attribute | StretchStyle Property

  • Article

This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9.

Sets or retrieves the method used to reveal the new content.

Syntax

HTML
{ filter:progid:DXImageTransform.Microsoft.Stretch(
    stretchStyle = sStyle ... ) ... }
Scripting
object.filters.item(
    "DXImageTransform.Microsoft.Stretch").StretchStyle [ = sStyle ]

Possible Values

sStyle String that specifies or receives one of the following possible values.
HIDE
Stretches new content over original content from left to right.
PUSH
Stretches new content in and squeezes original content out, moving from left to right. This motion resembles a cube rotating from one face to another.
SPIN
Default. Stretches new content over original content from the center outward.

The property is read/write. The property has a default value of SPIN.

Example

This example uses the backgroundColor property to change the display before the transition is played.

<SCRIPT>
var bToggle = 0;

function fnToggle() {
    oDiv.filters[0].Apply();                   
// After setting Apply, changes to the oDiv object 
//  are not displayed until Play is called.

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold"; 
        oDiv.innerHTML="TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>"; }
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="green";    
        oDiv.innerHTML="text<BR/>text<BR/>text<BR/>text<BR/>"; }  
        
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</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=2,  stretchStyle='PUSH');">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
    </DIV>

<SPAN ID="oSpan"><SPAN> 
</FONT>

Applies To

Stretch

See Also

Transitions, Transition Design Considerations