The blendtrans filter is simpler than the revealtrans filter introduced in the previous article. It has only one parameter: The duration conversion time, and has a single function, that is, it produces a fade-in effect, however, this effect is much more refined than the fade-in and fade-out effect of the revealtrans filter. You can see it below.
Because it is a dynamic conversion, the above is only the three images I caught. It can only help you understand the conversion process. The real effect can be seen only when you follow the methods described below. The blendtrans filter is the same as the revealtrans filter. You need to use JavaScript to call it. Now we will take the above effect as an example to see how to use the blendtrans filter, first, you must prepare several images of the same size.
Production method:
1. Use the old method (previous Article I have already introduced it many times) create a blendtrans filter named "myblen" and set duration to "3" (that is, the conversion time is 3 seconds). After the filter is set, go to the webpage Source code The Code :
<Style type = "text/CSS">
<! --
. Myblen {filter: blendtrans (duration = 3 )}
-->
</Style>
2. Insert the first image and add the name myimg to the image attribute panel;
3. Load the blendtrans filter to the image. The Code marked by the image "IMG" is as follows: ;
4. Insert the following JavaScript code between the source code Program :
<Script language = "JavaScript">
<! --
// Obtain the number of Array records
Function imgarray (LEN)
{
This. Length = Len;
}
// Declare the array and assign values to the array elements, that is, save the relative path of the image. If there are many images, you can increase the number of array elements,
// In this example, I only use three images, so the number of array elements is "3 ".
Imgname = new imgarray (3 );
Imgname [0] = "image/cssp2.jpg ";
// You need to replace "image/cssp2.jpg" with the path and file name of your image;
Imgname [1] = "image/cssp3.jpg ";
// You need to replace "image/cssp3.jpg" with the path and file name of your image;
Imgname [2] = "image/cssp1.jpg ";
// You need to replace "image/cssp1.jpg" with the path and file name of your image;
VaR I = 1;
// Demonstrate the conversion Effect
Function playimg ()
{
If (I = 2)
{I = 0 ;}
Else
{I ++ ;}
Myimg. Filters [0]. Apply (); // here "myimg" is the code of the picture you inserted in the webpage,
Myimg. src = imgname [I]; // when you change the inserted Image Code, you must change it here,
Myimg. Filters [0]. Play (); // otherwise, the program cannot find the North during the conversion.
// Set the Demo time in milliseconds. Therefore, "6000" indicates that the Demo time for each image is 6 seconds.
// The conversion time value set in the filter, so that it remains for a while after the conversion is completed, so that you can see the image clearly.
Mytimeout = setTimeout ("playimg ()", 6000 );
}
-->
</SCRIPT>
5. Add the following code to <body> Of the webpage source code: onload = "playimg ()".
Well, let's press F12 to enjoy your masterpiece.
If you want to get the revealtrans filter effect described in the previous article on the image, you just need to change the filter code in this example. Please try it!
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
