CSS滤镜转换简介 (Introduction to Filters and Transitions)

Introduction to Filters and Transitions

125 out of 189 rated this helpful-Rate this topic

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

With Microsoft Internet Explorer 4.0 and above, you can apply various multimedia-style visual effects to your Web page. You can implement these effects in Web pages using Cascading Style Sheets (CSS) properties. By combining filters and transitions with basic scripting, you have a powerful tool for creating visually engaging and interactive documents. Internet Explorer 5.5 and above supports the richest variety of optimized filters. Most examples in this article require that you have Internet Explorer 5.5 installed. This article includes the following sections, which explain how to use filters and transitions to add visual effects to your Web page.

• Creating Multimedia Effects with Visual Filters and Transitions 
• Defining Visual Filters 
• Scripting Filters 
  • The Filter String 
• Filter Design Considerations 
• Visual Filter Scenarios 
  • Creating Static Visual Effects 
  • Creating Dynamic Visual Effects 
  • Creating a Disabled UI Element Effect 
  • Creating Complex Visual Effects 
• Transitions 
• Interpage Transitions 
  • Interpage Transition Syntax 
• Transition Design Considerations 
• Transition Scenarios 
  • Creating Nonevent Transitions 
  • Creating Event-Driven Transitions 
  • Creating Complex Transitions 
• Filter and Transition User Interface Scenarios 
• Downlevel Support and Internet Explorer 4.0 Filters 
• Related Topics

Creating Multimedia Effects with Visual Filters and Transitions

Visual filters are extensions to CSS properties that change the display of an object's contents. In some cases, filters create simple behaviors that could be implemented as script. In other cases, a filter goes far beyond script and modifies the rendered appearance of the content of an object. Using filters simplifies the task of incorporating sophisticated effects in Web documents. Static visual filters affect the display of content, while transitions affect the way content changes in an object are displayed.

For a list of Internet Explorer 5.5 filters and transitions, see the Visual Filters and Transitions Reference. To see the Filters and Transitions Interactive Demo, which demonstrates most of the filters and transitions, click the following button.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

Filters are applied to HTML controls through the filter property. The filter property is a string of filter descriptions that uses a function-like notation, but you do not need to know script to implement this property. The following syntax shows an Internet Explorer 5.5 filter declaration in a STYLE attribute.

Copy

<ELEMENT STYLE="filter: progid:DXImageTransform.Microsoft.filtername(sProperties)" >

The following example shows a filter declaration composed of two filters.

Copy

<IMG ID=sample SRC="sample.jpg" 
STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
        progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); width=50%">

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_01.htm

This example HTML attaches two filters to the object. The first causes the image to blur over a specified number of pixels. The second filter flips the image vertically.

You can apply multiple filters, as shown in the example. The BasicImage and MotionBlur filters are both applied to the object. Each filter can have a set of optional parameters that define the nature of the effect, such as color or duration. In the example, usingBasicImage'sMirror andRotation properties gives the appearance of flipping the image vertically.

Filters often create effects that can be generated with script. This raises the question, "Why use filters if script can do the job?" There are several reasons for using filters. The most important is because they don't require script. For better or worse, many HTML authors do not use scripting. Filters are a convenient package for the same functionality that scripting provides. Another benefit of filters is that they are easier to author and can be applied to entire classes of elements, because they use the declarative and inherited syntax of CSS.

Filters and transitions display properly only on systems that have the color palette set to display 256 colors or more.

Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply,having layout means that an object has a defined height and width. Some objects, like form controls, have layout by default. All other filterable objects gain layout by setting theheight orwidth property, setting theposition property toabsolute, setting thewritingMode property totb-rl, or setting the contentEditable property to true.

You can also apply a filter to the BODY element. The BODY element automatically has layout because it specifically contains the client area of the window. However, doing so causes some filters to change when the window is resized by the user. One way to avoid this is to apply the filter to a DIV that contains all of the elements of the document. The following example shows how to work around applying a filter to theBODY element.

Copy

<BODY MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0" >
<DIV STYLE="width:100%;height:100%;
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)" >
<!-- All of your document elements go in here. -->
</DIV>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/gradientOnBodySizedDiv.html

Specific elements that cannot have filters and transitions applied to them include:

• The embed and applet elements
• The select and option form elements
• The tr, tHead, tBody, and tFoot table elements

Defining Visual Filters

Visual filters modify the appearance of the content of an object. The Alpha filter is a good example of a visual filter. It blends its target into the background; you control the amount of blend, or opacity. Opacity is expressed as a percentage. For example, the following HTML causes the image to be 20 percent opaque.

Copy

<IMG ID=sample SRC=sample.jpg 
STYLE="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20)">

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_02.htm

Scripting Filters

A filters collection is available on every object to provide access to the individual filters of each object. The collection can be accessed like any other object model collection. For example, the following line of script addresses the first filter in the collection of filters on the object with id=theDiv.

Copy

theDiv.filters.item(0).enabled = true;

Filters are considered subobjects of the object to which they are attached. Like other objects, they expose properties and methods for changing their internal state. Like other object model collections, thefilters collection supports several kinds of access. The following example addresses individual filters by their numeric and named indexes in thefilters collection.

Copy

<IMG id=sample SRC="sample.jpg" 
STYLE="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)
    progid:DXImageTransform.Microsoft.Alpha(opacity=50)
    progid:DXImageTransform.Microsoft.Blur(strength=10); position: relative">
<SCRIPT LANGUAGE="JavaScript">
{
// Each form below accesses the alpha filter of the object.
sample.filters.item(0).enabled = 1                                      // Numeric index
sample.filters.item("DXImageTransform.Microsoft.Alpha").enabled = 0     // Named index
}
</SCRIPT>

Numeric access is useful when more than one filter of the same type is applied or when the type of filter isn't known in advance—for example, if it is set through script or data binding. This is important for filters and transitions that have common properties and methods, such as the Color and play properties.

In the following example, the opacity of the content of an object is dynamically changed by changing theOpacity property of theAlpha filter.

Copy

<img id=sample src=sample.jpg style="filter:
    progid:DXImageTransform.Microsoft.Alpha(opacity=50)">
<SCRIPT LANGUAGE="javascript">
function fnDoWork()
{
     sample.filters.item("DXImageTransform.Microsoft.Alpha").opacity += 10;
}
</SCRIPT>

This same syntax can be used to call the methods needed to make the CheckerBoard transition work in the following example.

Copy

<div id=mydiv style="height:50;width:50;
        filter:progid:DXImageTransform.Microsoft.Wave(strength=100)
        progid:DXImageTransform.Microsoft.CheckerBoard(duration=4)">
    This is a div </div>

<SCRIPT LANGUAGE="JavaScript">
mydiv.filters.item("DXImageTransform.Microsoft.CheckerBoard").apply()
mydiv.innerText = "This is different text"
mydiv.filters.item("DXImageTransform.Microsoft.CheckerBoard").play()
</SCRIPT>

Alternately, you can access the CheckerBoard filter by index.

Copy

<SCRIPT LANGUAGE="JavaScript">
mydiv.filters.item(1).apply()
mydiv.innerText = "This is different text"
mydiv.filters.item(1).play()
</SCRIPT>

The Filter String

The Style object also has afilter property. This is a read/write string that you can use to manipulate the CSS filters of an object directly. For instance, using thediv object defined above, the following code produces an alert message.

Copy

<div id=odiv style="height:50;width:50;
filter:progid:DXImageTransform.Microsoft.Wave(strength=100)
progid:DXImageTransform.Microsoft.CheckerBoard(duration=4)"> 
    This is a div </div>

<SCRIPT>
...
alert(odiv.style.filter)
...
</SCRIPT>

The alert message contains the following string.

Copy

filter:progid:DXImageTransform.Microsoft.Wave(strength=100)
progid:DXImageTransform.Microsoft.CheckerBoard(duration=4)

Writing to this property is useful to change an object's filters dynamically. Writing to this property overwrites the existing value, and the browser renders the new string immediately. The following example adds anIris filter to the filter string on the fly.

Copy

<DIV ID="odiv" STYLE="height:50;width:50;filter:
    progid:DXImageTransform.Microsoft.Wave(strength=100)
        progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"> 
        This is a div </DIV>

<SCRIPT>
...
odiv.style.filter += "progid:DXImageTransform.Microsoft.Iris(irisstyle='STAR',duration=4)"
...
</SCRIPT>

After the change, the filter string looks like this:

Copy

progid:DXImageTransform.Microsoft.Wave(strength=100)
        progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)
        progid:DXImageTransform.Microsoft.Iris(irisstyle='STAR' duration=4);

Additional changes to that collection's filter string modify the new string. For complex filter manipulation, you must keep track of the current states of the filter collections.

Note  To improve performance, it is strongly recommended that you access CSS filters through the object model whenever possible, and only access the filter string when object model functionality is not adequate. Even when dynamically adding filters, in most cases you should add the filter to the initial filter declaration in the object's style sheet with the Enabled property set to false. When the filter will be displayed, the script can set the Enabled property of that filter to true.

This sample demonstrates how to change filter properties from script.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_03.htm

This sample uses a more complex script that calls filter methods and manipulates properties.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_04.htm

Filter Design Considerations

Some filters use transparency to create a visual effect. These filters includeShadow,Compositor,DropShadow,Glow, andMaskFilter. Text with no background color or image automatically has transparency; the space around the characters shows through to the object or page behind it. GIF images must be in gif89a format with a transparent color to display these filters properly.

It is important to consider performance when designing Web pages with filters. Processing time is required to calculate the display of filter effects, and some effects require more time than others to apply. It is useless to try to apply and change a filter on an object before the browser can even render it. If you apply and change a filter before the browser can render the object, the changes are not updated. For example, changing theAlpha filter'sOpacity property in a short looping script does not result in consecutive updates to the object. To ensure updates are performed for each cycle of the script, use anonfilterchange event handler to delay changes in opacity until the browser has rendered the last update.

You can apply one or more filter effects to a group of objects by wrapping them in a parent element which has one or more filters applied to it.

Visual Filter Scenarios

There are unlimited uses for filters in both static and dynamic Web pages. The following scenarios explore some common or interesting applications of filter styles and combinations of script and filters.

Creating Static Visual Effects

Static visual effects are the most common use of filters. These uses include simply applying a filter to an object to create a nonchanging effect, such as a drop shadow behind text. Static effects are an easy way to enhance a Web page's design with minimum effort, and often without scripting.

No-script example

The following example shows how you can create television-style effects using Dynamic HTML (DHTML) positioning and theAlpha filter.

Copy

<HTML>
<HEAD><TITLE>Static Alpha Filter Demo</TITLE>
</HEAD>
<BODY>
<DIV style="position:absolute; top:20; left:15; width:50%; height:35;
    background-color: black; filter: 
    progid:DXImageTransform.Microsoft.Alpha(opacity=50)"></DIV>
<DIV style="color:red; position:absolute; top:20; width:50%; height:100;
    margin-top:5; margin-left:5;"><P style="font-size:14pt;font-weight:bold;
	text-align:center">HERE IS CAPTION TEXT</P></DIV>
<IMG src="sam2.jpg">
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_07.htm

Creating Dynamic Visual Effects

Dynamic visual effects bring a basic level of interactivity to Web documents. Dynamic effects require an event to prompt a change in the document—this can be an onmouseover or click event, a timer interval, or a sequence of script functions that call the new content states.

Event script example

In this example, an interactive step is added to the previous television caption example, so that the caption displays only when the mouse pointer is over the inline image.

Copy

<HTML>
<HEAD><TITLE>Dynamic Alpha Filter Demo</TITLE>
<SCRIPT>
function caption()  {
    if (bob.style.visibility == "hidden")    {
        bob.style.visibility = ""
        fred.style.visibility = ""
    }
    else  {
        bob.style.visibility = "hidden"
        fred.style.visibility = "hidden"
    }
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="bob" style="visibility:hidden; position:absolute; top:20; left:15; width:50%; height:35; background-color: black; filter:progid:DXImageTransform.alpha(opacity=50)"></DIV>
<DIV id="fred" style="visibility:hidden; color:red; position:absolute; top:20; width:50%; height:100; margin-top:5; margin-left:5;"><P style="font-size:14pt; font-weight:bold; text-align:center">HERE IS CAPTION TEXT</P></DIV>
<IMG src="sam2.jpg" οnmοuseοver="caption()" οnmοuseοut="caption()">
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_09.htm

Timer script example

Visual effects can be animated using a timer script. The following sample shows two filters,Alpha andGlow, and two timer methods.

Copy

<HTML>
<HEAD><TITLE>Timer Demos</TITLE>
<SCRIPT>
function init()  {
    makeFlash(bob)
    setInterval("fred.filters.item("DXImageTransform.Microsoft.Alpha"
    ).opacity = (fred.filters.item("DXImageTransform.Microsoft.Alpha"
    ).opacity + 5) % 101", 100)
    setInterval("fnDoWork(dave)", 100)
}
var delta = 5
function fnDoWork(obj)  {
    if ((obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity + delta > 100)
    ||  (obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity + delta < 0))
        delta = - delta
    obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity += delta
}
function makeFlash(obj)  {
    obj.flashTimer = setInterval("bob.filters.item("DXImageTransform.Microsoft.Glow").enabled =
	    !bob.filters.item("DXImageTransform.Microsoft.Glow").enabled", 1000)
}
function stopFlash(obj)  {
    clearInterval(obj.flashTimer)
}
</SCRIPT>
</HEAD>
<BODY οnlοad="init()">
<DIV id=bob style="width:50%; filter:progid:DXImageTransform.Microsoft.Glow(
        Color=#FAF900,Strength=2,enabled=0);"
        οnclick="stopFlash(this)"><H1>Here is some text</H1></DIV>
<DIV id=fred style="width:50%; filter:progid:DXImageTransform.alpha(
        opacity=100);"><H1>Here is some text</H1></DIV>
<DIV id=dave style="width:50%; filter:progid:DXImageTransform.alpha(
        opacity=50); color: blue">
    <H1>Here is some text</H1></DIV>
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_08.htm

Timer cycle example

You can use timers to create cyclical effects. The following example shows a set ofdiv elements cycling through a series of transitions.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_10.htm

Creating a Disabled UI Element Effect

Web authors often use multiple graphics to indicate a user state for a single element, such as a navigation bar button. With filters, multiple graphics are no longer required—you can change the display of one graphic to indicate whether it is available for user interaction. Best of all, this is all done in code and doesn't require downloading additional graphics from a server.

No-script example

This example shows how both the BasicImage and Alpha filters can visually represent unavailable link states.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_11.htm

Event script example

As interactive objects, links can change state in response to mouse events, as this example demonstrates.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_12.htm

Creating Complex Visual Effects

You can combine filters, transitions, and sophisticated programming to create complex and compelling visual designs and interactivity. The following examples provide a glimpse of the versatile effects provided by filters.

Simple script example

The following example shows how you can combine the MaskFilter filter with a series of style changes.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_13.htm

Event script example

The Light filter is a complex visual filter. The following sample shows how you can combine the filter with mouse events to create a unique Web browsing experience.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_14.htm

Programming example

You can control the same Light filter with more sophisticated programming, as the following example shows.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_15.htm

Transitions

Transitions are time-varying filters that affect how a change of content is displayed. One example is changing thesrc attribute of an image to display a new image on-screen. A transition provides an animated effect to display the new image. You can also apply transitions to make an object fade in or fade out by changing thevisibility property.

Transitions have methods and events to manage the timing of the effect. When a filter completes a display update or a transition finishes playing, theonfilterchange event is fired. By adding anonfilterchange event handler to capture the completion of one transition, you can chain transitions together so they start one after another. Theevent object supplies the necessary information about the filter and the object involved. You can use theevent object to access thesrcFilter property.

A transition's apply method freezes the appearance of an object when applying a transition. This allows changes to be made without affecting the display immediately. Theplay method then invokes the transition. At any time, the script can terminate the transition by calling thestop method. The following example shows how to perform an automatic slide show of images.

Copy

<HTML>
<HEAD><TITLE>Transition Fade Demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var fRunning = 0
function startTrans()
{
    if (fRunning == 0)
    {
        fRunning = 1
        SampleID.filters.item(0).Apply();
        SampleID.src = "sunset.jpg";
        SampleID.filters.item(0).Play()
    }
}
</SCRIPT>
<SCRIPT for="SampleID" event="onfilterchange">
fRunning = 0
</SCRIPT>
</HEAD>
<BODY>
<IMG id="SampleID" src="beach.jpg" style="filter:progid:DXImageTransform.Microsoft.Fade(duration=3)" οnclick="startTrans()"><BR>
Click image for Transition to Fade.
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_05.htm

The following example shows a simple transition between two images. Clicking the button runs the doTrans script, which calls theapply method on theBlinds transition to stop painting the image. The script then sets an alternative image and calls theplay method on the filter to proceed with the transition. In this case, theBlinds transition is applied using an inline style on the object.

Copy

<HTML>
<HEAD><TITLE>Transition Sample</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function doTrans()
{
    theImg.filters.item(0).Apply();
    theImg.src="circles.gif";
    theImg.filters.item(0).Play();
}
</SCRIPT>
</HEAD>
<BODY style="background-color:darkblue">
<IMG ID=theImg width=200 height=200
src="clouds.jpg" style="filter:progid:DXImageTransform.Microsoft.Blinds(Duration=2);">
<BR>
<INPUT type=button value="Start Transition" onClick="doTrans()">
<IMG src="clouds.jpg" style="position:relative; width:1; height:1;visibility:hidden">
<IMG src="circles.gif" style="position:relative; width:1; height:1; visibility:hidden">
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_06.htm

This example also demonstrates the difference between asynchronous and synchronous changes. Changing theinnerText property of an object is synchronous—the action is completed by the time the statement executes. Changing thesrc property is effectively asynchronous. Although the actualsrc property changes immediately, the display of the object isn't fully updated until the new image is completely downloaded. A carefully written script waits for theonreadystatechange event to fire on the image and checks for thereadyState property of the image to be set tocomplete. Preloading graphics for separate objects is a good way to avoid the synchronicity issue, but it only works if the transition is applied after all images are downloaded.

Interpage Transitions

Interpage transitions enable you to provide effects for the entire window as a Web page is loaded or exited. When a transition is applied to a page, it creates an interpage transition where the page's entire content becomes the object of the filter. You can apply an interpage transition to a page when it is loaded or exited using the same transitions described in theTransitions section above. Just as programs such as Microsoft PowerPoint enable transitions between slides, you can provide wipes and fades, and create custom transitions when the content on a Web page changes.

Transitions are implemented with meta tags placed in the head section of Web pages. The meta tag specifies the type of transition, as well as whether the transition should occur as the following page is loaded or as the current page is exited.

Interpage Transition Syntax

The syntax for interpage transitions consists of two parts: when the transition should play, and what kind of interpage transition to use. The following two examples show how to apply interpage transitions upon loading and exiting a page.

Copy

<META http-equiv="Page-Enter"
CONTENT="progid:DXImageTransform.Microsoft.Blinds(Duration=4)" />

<META http-equiv="Page-Exit"
CONTENT="progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')" />

The first meta tag causes the Blinds transition to play when the user loads the page, lasting four seconds; the secondmeta tag causes aSlide transition to play when the user exits the page, lasting 2.5 seconds, written as 2 seconds and 500 milliseconds.

Four events can create instances of interpage transitions: Page-Enter,Page-Exit,Site-Enter, and Site-Exit.

Transition Design Considerations

The primary concern of designers when implementing transitions is timing. Because transitions run asynchronously, you must track each transition state through onfilterchange events to determine when a particular transition is finished. Remember that image downloading is asynchronous, and the visual state of objects isn't fully updated until after images are completely downloaded.

Transitions should follow any static filters in the filter string. Even though theCompositor filter provides a static filter output, it is implemented as a transition, and should follow other static filters in an object's declaration.

When you change the content of the filtered object, content outside the final boundary of the object is not captured by the transition's effects. If you change the position of the object, theplay method moves the initial content to the new position, and then makes a transition to the new content. Also, if the shape of the new content is changed, theplay method clips the initial content to the new size and then makes a transition to the new content. To avoid these results, use thePercent property to capture a frame of the transition and incrementally move or resize the content. You can use theonfilterchange event to coordinate moving or resizing the content. Another option is to wrap the changes in a larger object and apply the transition to the larger object.

Transition Scenarios

You can use transitions in both static and dynamic Web pages. The following scenarios demonstrate common or interesting applications of filter styles combined with transitions and script functions.

Creating Nonevent Transitions

Nonevent transitions are analogous to static filters—they are used frequently to enhance the appearance of a page without changing its interactivity.

Simple script example

The following example uses transitions to display information in an interesting manner as the page loads.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_16.htm

Creating Event-Driven Transitions

It is also possible to apply transitions while events are fired on the page. These events can be user interactions, such as onmouseover or onmouseclick events, or time dependent events, like usingHTML+TIME (Timed Interactive Multimedia Extensions) to manage timing.

Event script example

This example shows how a mouse event can trigger a sequence of transitions.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_17.htm

Creating Complex Transitions

Combining filters and transitions enables you to create complex, interactive, and compelling visual designs. The following example demonstrates the versatility of visual effects that you can use in Internet Explorer.

Timer script example

Computer-based training applications can use timed transitions to demonstrate their subject matter, as shown in the following example.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/filt_19.htm

HTML+TIME script example

You can manage complex timing efficiently with the aid of HTML+TIME features. This example chains transitions together to make a slide presentation.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/filter/slideshow.htm

Filter and Transition User Interface Scenarios

Filters and transitions enable you to create many compelling user interface applications, as shown in the following example.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/filter/buttons.htm

Downlevel Support and Internet Explorer 4.0 Filters

Browsers that don't support the filter property or even style sheets simply ignore filters. Even browsers that support thefilter property can do so in different ways without affecting the Web designs. The differences between the filters for Internet Explorer 4.0 and Internet Explorer 5.5 illustrate this. The most obvious change is the syntax; programmatic identifiers (PROGIDs) are used with the Internet Explorer 5.5 filters, but not with Internet Explorer 4.0.

Though the Internet Explorer 4.0 filter syntax is permitted in Internet Explorer 5.5, it is recommended that you replace them with the current versions. Besides efficiency, there are behavioral differences between the effects produced with Internet Explorer 4.0 filter syntax compared to Internet Explorer 5.5 syntax.

In Internet Explorer 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure Internet Explorer 8 renders the filters properly. The-ms-filter Attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely.It also avoids future name clashes with other CSS parsers.

Copy

// Internet Explorer 4.0 syntax

<Element STYLE="filter:filtername(sProperties)" >

// Internet Explorer 5.5 syntax

<Element STYLE="filter: progid:DXImageTransform.Microsoft.filtername(sProperties)" >

// Internet Explorer 8 syntax

<Element STYLE="-ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'" >

When you use the Internet Explorer 4.0 filter syntax, margins can affect how some filters are applied and rendered. An object's boundary can be clipped when it is set too close to the filtered content. For example, if you apply aGlow filter to an object's text without a margin, the object boundary clips some of the glow effect if the text is next to the boundary.

With Internet Explorer 5.5 syntax, the Shadow, DropShadow, andGlow filters extend the boundary of an object to make room for the filter effect, while the Internet Explorer 4.0 versions clip the filter effect at the boundary.

In many cases, color is expanded to include the Alpha component (#AARRGGBB) in the Internet Explorer 5.5 filters. See the reference pages to confirm which filters this applies to.

For a demonstration of the Internet Explorer 4.0 filters or transitions, click a button below.

Filter Demonstrations

• Filters

  Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/FiltWzrd.htm

• Transitions

  Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/trnswzrd.htm

The following table identifies the mapping between Internet Explorer 4.0 filters and the preferred Internet Explorer 5.5 implementation.

Internet Explorer 4.0 to 5.5 Filters Mapping
4.0 filter name	Alternate 5.5 implementation
alpha	DXImageTransform.Microsoft.Alpha
BlendTrans	DXImageTransform.Microsoft.Fade
blur	DXImageTransform.Microsoft.MotionBlur
chroma	DXImageTransform.Microsoft.Chroma
dropShadow	DXImageTransform.Microsoft.DropShadow
FlipH	DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)
FlipV	DXImageTransform.Microsoft.BasicImage(mirror=1)
glow	DXImageTransform.Microsoft.Glow
Gray	DXImageTransform.Microsoft.BasicImage(grayscale=1)
Invert	DXImageTransform.Microsoft.BasicImage(invert=1)
light	DXImageTransform.Microsoft.Light
mask	DXImageTransform.Microsoft.MaskFilter
shadow	DXImageTransform.Microsoft.Shadow
wave	DXImageTransform.Microsoft.Wave
Xray	DXImageTransform.Microsoft.BasicImage(xray=1)
RevealTrans	Various. See next table.

The following table maps Internet Explorer 4.0 RevealTrans transitions to the applicable Internet Explorer 5.5 syntax

revealTrans.Transition value vs. 5.5 Filters Mapping
Transition Property Value	Alternate 5.5 implementation
0 - Box in	DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='in')
1 - Box out	DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='out')
2 - Circle in	DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='in')
3 - Circle out	DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='out')
4 - Wipe up	DXImageTransform.Microsoft.Blinds(direction='up', bands=1)
5 - Wipe down	DXImageTransform.Microsoft.Blinds(direction='down', bands=1)
6 - Wipe right	DXImageTransform.Microsoft.Blinds(direction='right', bands=1)
7 - Wipe left	DXImageTransform.Microsoft.Blinds(direction='left', bands=1)
8 - Vertical blinds	DXImageTransform.Microsoft.Blinds(direction='right')
9 - Horizontal blinds	DXImageTransform.Microsoft.Blinds(direction='down')
10 - Checkerboard across	DXImageTransform.Microsoft.CheckerBoard(direction='right')
11 - Checkerboard down	DXImageTransform.Microsoft.CheckerBoard(direction='down')
12 - Random dissolve	DXImageTransform.Microsoft.RandomDissolve
13 - Split vertical in	DXImageTransform.Microsoft.Barn(orientation='vertical', motion='in')
14 - Split vertical out	DXImageTransform.Microsoft.Barn(orientation='vertical', motion='out')
15 - Split horizontal in	DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='in')
16 - Split horizontal out	DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='out')
17 - Strips left down	DXImageTransform.Microsoft.Strips(motion='leftdown')
18 - Strips left up	DXImageTransform.Microsoft.Strips(motion='leftup')
19 - Strips right down	DXImageTransform.Microsoft.Strips(motion='rightdown')
20 - Strips right up	DXImageTransform.Microsoft.Strips(motion='rightup')
21 - Random bars horizontal	DXImageTransform.Microsoft.RandomBars(orientation='horizontal')
22 - Random bars vertical	DXImageTransform.Microsoft.RandomBars(orientation='vertical')
23 - Random	Apply above filters randomly.

 

文章来源：http://msdn.microsoft.com/en-us/library/ms532847(v=VS.85).aspx

 另参考：http://msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx