Author: Fengyong Yao
BlendTrans Filter is simpler than the ReveAltrans filter introduced by the previous introduction, it has only one parameter: Duration transform time, its function is also a single, which is an effect of fade into fade, but it's this effect ratio The fade of the REVEALTRANS filter will be fine, and you will see it.
Figure 1 first picture
Figure 2 Pictures in the conversion
Figure 3 Second Picture
Because it is dynamic conversion, the above is just three pictures I caught, I can only help you understand the conversion process, the real effect is only waiting for you to do it in the way I can do it. Like the Revertrans filter using the BlendTrans filter, you need to use the method of JavaScript to call it. We now use this effect as an example to see how to use the BlendTrans filter. First, you must prepare a few photos. Size picture.
Production Method:
1. Make a BlendTrans filter with an old way (the previous article has been introduced) to make a BlendTrans filter, name "Myblen", Duration is set to "3" (ie, the conversion time is 3 seconds), the filter is set, The
and head> of the page source code will have the following code:
.myblen {filter: BlendTrans (duration = 3)}
->
style>
2, insert the first picture, add a name to the picture on the properties panel of the picture: MyImg;
3, load the BlendTrans filter to the picture; then the "img" tag of the picture is like this: ;
4. Insert the JavaScript program in the source code
and head> and hEAD>:
// Get the number of records
Function IMGARRAY (LEN)
{
THISLENGTH = LEN;
}
/ / The declaration array is assigned to array elements, that is, save the relative path of the picture, if there is more pictures, you can increase the number of array elements,
// I only used three pictures in this example, so the number of array elements is "3".
IMGNAME = New Imgarray (3);
IMGNAME [0] = "image / cssp2.jpg";
// You should change here "image / cssp2.jpg" when making it in the path and image file name where your image is located;
IMGNAME [1] = "image / cssp3.jpg";
// You should change here "image / cssp3.jpg" when making it in the path and image file name where your image is located;
IMGNAME [2] = "image / cssp1.jpg";
// You should change here "image / cssp1.jpg" to your image and image file name; var i = 1;
/ / Demo the transformation effect
Function PlayImg ()
{
IF (i == 2)
{i = 0;}
Else
{i ;}
Myimg.filters [0] .apply (); // Here "is the code of the picture you insert in the web page,
MyImg.src = IMGNAME [i]; // When you change the inserted picture code, it must also change here.
MyImg.Filters [0] .play (); // Otherwise, the program can not find north when transform.
// Set the demo time, here is in milliseconds, so "6000" means that the demo time of each picture is 6 seconds, this time value is
// The conversion time value set in the filter, so when the conversion is completed, it is still a time to see the picture.
MyTimeout = setTimeout ("PlayIMG ()", 6000);
}
->
script>
5. Add such code in
to join the page source code: οnlοad = "PlayIMG ()".Ok, press F12 to enjoy your masterpiece.
If you want to get the RevealTrans filter effect in the picture, just change the filter code in this example, try it!