Use your JavaScript Editor to open Span.htm (in the Tutorial folder inside your JavaScript Editor folder) and examine the code.
 To run the code click on the Show Internal Viewer button, or
Click here to open Span.htm in the browser.
Note: this script uses the transition filters, which are currently supported only by Internet Explorer.
The technique shows how to change the background of a span via transition effect. To do that you need to:
Define a span and give it an ID
Specify revealTrans() filter, and
Make the span hidden
The example below defines a dark grey span with a light grey rectange inside.
<span id=Span1 style="z-index: 100; filter: revealTrans(); visibility: hidden; width: 300px; position: absolute; height: 300px; BACKGROUND-COLOR: rgb(128,128,128)">
<center>
<div style="width: 210px; position: relative; TOP: 75px; height: 150px; background-color: rgb(192,192,192)"> </div>
</center>
</span>
|
After that call cpTransition(Span1, 23, 0.5) to perform the effect. The second parameter specifies the transition index (23 is a random transition). Click on change several times to see different transitions at work. The last parameter specifies the time to complete the effect in seconds.
Try experimenting by changing the transition index in cpTransition(Span1,23,0.5) from a random transition (23) to a number between 1 and 22 to see individual transition effects.
Next |
