Adding Transitions (Windows CE 5.0)

아티클
09/14/2012

By using transitions, Web designers can readily implement visual effects on their Web pages by using HTML and simple script code. Transitions are useful in situations where you want to render content on a page progressively. For example, you can use transitions in a slide show to navigate from one slide to the next.

The following table shows the supported transitions in Microsoft® Windows® CE with a description of the purpose of each.

Transition	Description
RandomBars	Reveals new content of the object by exposing random lines of pixels.
RandomDissolve	Reveals new content of the object by exposing random pixels.
Fade	Reveals new content of the object by fading out the original content.
Pixelate	Reveals the new content of the object by displaying it as colored squares that take the average color value of the pixels that they replace.

To implement a transition effect on an object

Define the object and specify the desired transition.
1. Set the DIV ID attribute and define the layout for the image by setting the Style attribute. The following code shows how to set the height, width, and background properties for the image.
```
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
```
2. Apply the Fade transition and set the duration of the effect. The following code shows how to specify the transition and the duration of the effect.
```
filter:progid:DXImageTransform.Microsoft.Fade(duration=2);">
```

Write a function to start the transition within <SCRIPT>...</SCRIPT> tags.

The following code implements an example function, fnApplyFade, that toggles the background color from "gold" to "blue" and completes the transition by calling the play (Internet Explorer) method.

//Declare a Boolean variable to store transition state.
var bToggle = 0;
fnApplyFade()
{
  //Apply the transition without causing an immediate repaint, 
  //by calling the apply method. 
  oDiv.filters[0].Apply();
  //Implement the necessary transition changes. 
  if (bToggle)
  {
    bToggle = 0;
    oDiv.style.backgroundColor="gold";
  }
  else
  {
    bToggle = 1;
    oDiv.style.backgroundColor="blue";
  }
  //Call the play method to complete the transition.
  oDiv.filters[0].Play();
}

Call the function. The following example code invokes the transition effect by calling the fnApplyFade function in the onclick event of a button.
```
<BUTTON onclick="fnApplyFade()">Toggle Transition</BUTTON><BR/><BR/>
```

See the output.

For more information about the supported transitions, see this Microsoft Web site.

다음을 통해 공유

Adding Transitions (Windows CE 5.0)

See Also

추가 리소스