Javascript achieves classic image Switching

CSS Filter: pixelate

Pixelate compatibility: ie5.5 +

Syntax:

Filter: progid: DXImageTransform. Microsoft. pixelate (Enabled = benabled, duration = fduration, maxsquare = iwidth)

Attribute

Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | false true: default value. Filter activation.
False: the filter is disabled.

Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Maxsquare: Optional. Integer ). Set or retrieve the maximum width of the rectangle Color Block in the conversion. The value range is 2-50. The default value is 50.

Features:

Enabled: read/write. Boolean ). See enabled attributes.
Duration: read/write. Floating Point Number (real ). See duration attributes.
Maxsquare: read/write. Integer ). See maxsquare attributes.
Percent: read/write. String ). Set or retrieve the points output by the current static filter in the conversion process. Value Range: 0-100. The default value is 0, and the conversion has not yet started. 100 indicates that the conversion is complete.
This feature is used to create a static filter effect using a conversion filter. Set the value to the point that defines the stop of the conversion process. Follow these steps to create a static filter effect using a conversion filter:
Use the apply method of the conversion filter. This will capture the initial display of the object content and set the percent property value to 0.
Change the object content. Such as visibility, innertext, background-color, border, or attributes of its sub-object.
Set the percent feature of the conversion filter. Determine a point in the desired conversion process. This will capture a content image at this point in the conversion process.
Set the enabled attribute value of the conversion filter to true. Then, the object to which the filter is applied updates its content based on the obtained image.
Note: You can only use the visibility attribute to change the sub-objects of an object. Otherwise, the direct changes to the child objects will be immediately displayed without being captured by the conversion filter.
Status: read-only. Integer ). Retrieves the current status of the conversion. 0 | 1 | 2 0: Stop ).
1: Apply ).
2: the conversion is in progress (play ).

Method:

Apply: capture the initial display of object content and make necessary preparations for conversion. No return value.
Once this method is called, any changes to the object property will not be displayed until you call the play method to start conversion.
Note: You can only use the visibility attribute to change the sub-objects of an object. Otherwise, the direct changes to the child objects will be immediately displayed without being captured by the conversion filter.
When you call the play method, the conversion results show changes in content (changes in object attributes and visibility attributes of sub-objects ).
Play (iduration): starts conversion. No return value. The parameters are shown in the following table.
Iduration: Optional. Floating Point Number (real ). Specifies the duration of the filter. The default unit is seconds.
Use the iduration parameter of the play method to set the duration of playback conversion. The value of the iduration parameter replaces the Duration Attribute setting in the current cycle of conversion. However, the value set using the Duration Attribute will be restored in the next conversion.

Stop: Stop conversion playback. And present the Conversion Result image. The onfilterchange event is also triggered. No return value.

Note:

This conversion filter is a complex visual effect. In the first half of the conversion, the object content is first displayed as a rectangle Color Block collage, and then the width of the rectangle is increased from one pixel to the value set by the maxsquare attribute. The color of each rectangle is determined by the average color of the pixels in the covered area. In the second half of the subsequent conversion, the rectangle is restored to the specific image pixel of the new content, showing the new content.
Set the enabled attribute value of this filter to false before using this conversion filter. This will prevent the static filter of the color collage effect from first acting on the object content before conversion.

Run code box

<HTML xmlns: RDL>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> Rainer's Handbook </title>
<Style>
Body {margin: 0px; padding: 16px; Background: # ffffff; overflow: auto ;}
Body, table, input, select, textarea, A {font-family: verdana, tahoma, Arial; font-size: 11px; color: #000000; Word-break: break-all ;}
Table, IMG {border: 0px ;}
A {text-Decoration: none; color: #003399 ;}
A: hover {color: #000000; text-Decoration: underline ;}
# Id_div3 {padding-top: 8px; border-top: 1px solid #000000; line-Height: 15px ;}
# Id_span3 {font-size: 10px; font-family: tahoma ;}
</Style>
<Style>
# Idparentdiv {width: 100%; Height: 120px; padding: 6px; Background-color: buttonshadow; position: relative; filter: progid: DXImageTransform. microsoft. pixelate (Enabled = "false ");}
# Iddiv1 {width: 200px; Height: 100px; Background-color: #000000; color: # ffffff; padding: 4px; position: absolute; Z-index: 3; visibility: hidden ;}
# Iddiv2 {width: 200px; Height: 100px; Background-color: #000000; color: # ffffff; padding: 4px; position: absolute; Z-index: 4; visibility: visible ;}
# Idcodediv {width: 100%; padding: 4px; font-family: verdana, tahoma; margin: 12px 0px 0px 0px; Background-color: # eeeeee; font-weight: bold ;}
</Style>

<SCRIPT>
VaR sbasestr = "filter: progid: DXImageTransform. Microsoft. pixelate (";
VaR oparentdiv, ocodediv;
Function rdl_doinit (e ){
Oparentdiv = Document. All ("idparentdiv ");
Ocodediv = Document. All ("idcodediv ");
Rdl_play ();
}
Function rdl_change (e ){
With (document. All ("idsel1") var svalue1 = options [selectedindex]. value;
With (document. All ("idsel2") var svalue2 = options [selectedindex]. value;
Ocodediv. innertext = sbasestr + ", enabled =" + oparentdiv. filters [0]. enabled + ", duration =" + svalue1 + ", maxsquare =" + svalue2 + ");";
With (oparentdiv. Filters [0]) {
Duration = svalue1; maxsquare = svalue2;
}
}

Function rdl_play (){
With (oparentdiv ){
If (Children [0]. style. Visibility = "hidden") Children [1]. style. Visibility = "visible ";
Else children [1]. style. Visibility = "hidden ";
Filters [0]. Apply ();
If (Children [0]. style. visibility = "hidden") Children [0]. style. visibility = "visible"; else children [0]. style. visibility = "hidden ";
If (Children [1]. style. visibility = "hidden") Children [1]. style. visibility = "visible"; else children [1]. style. visibility = "hidden ";
Filters [0]. Play ();
}
}
Window. onload = rdl_doinit;
</SCRIPT>

</Head>
<Body>
<Div id = idparentdiv>
<Div id = iddiv1> I am the input obtained by the merging filter <B> A </B>. </Div>
<Div id = iddiv2> I am the input obtained by the merging filter <B> B </B>. </Div>
</Div>
<Br>
<Table> <tr> <TD>
<Select id = idsel1 onchange = "rdl_change ();">
<Option value = "0.5" style = "font-weight: bold;"> --- duration ---
<Option value = "1"> 1
<Option value = "2"> 2
<Option value = "4"> 4
<Option value = "5"> 5
<Option value = "6"> 6
<Option value = "12"> 12
</SELECT>
</TD> <TD>
<Select id = idsel2 onchange = "rdl_change ();">
<Option value = "50" style = "font-weight: bold;"> --- maxsquare ---
<Option value = "25"> 25
<Option value = "10"> 10
<Option value = "5"> 5
</SELECT>
</TD> <TD>
<Input type = button value = "play" onclick = "If (oparentdiv! = NULL) rdl_play (); ">
</TD> <TD>
<Input type = button value = "stop" onclick = "If (oparentdiv! = NULL) oparentdiv. Filters [0]. Stop (); ">
</TD> </tr> </table>
<Br>
<Div id = idcodediv> filter: progid: DXImageTransform. Microsoft. pixelate (Enabled = "false") </div>

<Br> & nbsp; <br>
<Div </P> <Div id = "ad_f10" class = "ad_f10"> <SCRIPT src = "/AD/ad_f10.js"> </SCRIPT> </div> <Div id = "ad_f11" class = "ad_f11"> <SCRIPT src = "/AD/ad_f11.js"> </SCRIPT> </div> <Div class = 'kjy'> <strong> Article arrangement: </strong> <a href = 'HTTP: // www.diybl.com 'target = _ blank> <strong> <font color = "# cc0000"> DIY tribe </font> </strong> </a> <strong> http://www.diybl.com </strong> (this site) <a href = "javascript: Self. location = '/user/CHM/RAR. asp? C_id = 4361 '"class =" redlink "> [Click to package this article] </a> </div> <Div class = kvl> [1] <a href = http://www.diybl.com/course/1_web/javascript/Javascriptshl/200721/4361_2.html> [2] </a> </div> <Div id = "ad_f4" class = "ad_f4"> <SCRIPT src = "/AD/ad_f4.js"> </SCRIPT> </div>
<Div class = mediacontent> If the image or page cannot be normally displayed, <a onclick = "openerror ('000000', 'javascript achieves classic image switching effect '); "onmouseover =" this. style. cursor = 'hand'; "class =" redlink "> click here </a> for intra-Site Search:
<Input type = "text" name = "wd3" size = "25" maxlength = "255">
<Input type = "button" value = "qianxun search" onclick = "tosearch (document. All. wd3);"> </div>
<Div style = "clear: both" align = center> </div>
<Div class = toollinks> [<a href = "javascript: window. external. addFavorite (window. location, 'javascript achieves classic image switching-DIY tribe '); "> Add this page to favorites </a>] [<
Href = "http://www.diybl.com/course/1_web/javascript/Javascriptshl/2afdokf.html" target = "_ blank"> topic page </a> [<a href = "# comment"> comment </a>] [<a href = "#"> return to the top </a>] [<
Href = "javascript: window. Close ()"> close </a>] </div>
<Div class = "p_bottom"> previous article: <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4362 .html"> cool-based dynamic effects </a> <br> next article: <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4360 .html"> generate code using groovy template </a> </div>
<Div style = "clear: Both; Background: # FFF; overflow: hidden; Height: 8px"> </div>
<Div id = links align = center>
<Table class = xgzt cellspacing = 0 cellpadding = 0 width = 687>
<Tbody>
<Tr>
<TD style = "padding-left: 5px" bgcolor = # e1effa>
<H3> recommended articles <Tr>
<TD bgcolor = # fcfeff> <Div class = "tj_l TJ"> <nobr> <a href = "/Course/parse Web/JavaScript/javascriptshl/200721/4176 .html" target = "_ blank "> how to transmit and obtain parameters in the address bar of an HTML page </a> <br> <a href ="/Course/tutorial Web/JavaScript/javascriptshl/200721/4211 .html "target = "_ blank "> very practical results: use js to calculate the remaining number of words available </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4599 .html" target = "_ blank"> [recommended] very good Javascript script </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4229 .html" target = "_ blank"> JavaScript Application Example: statistical Indicator </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4659 .html" target = "_ blank"> automatically generated by JavaScript a thumbnail </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4354 .html" target = "_ blank"> JavaScript achieves Ajax drag effect </ a> <br> <a href = "/Course/parse Web/JavaScript/javascriptshl/200721/4602 .html" target = "_ blank"> use JavaScript to rotate Web Images </> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4270 .html" target = "_ blank"> browser language detection, suitable for multilingual websites </a> </div> <Div class = "tj_r TJ"> <nobr> <a href = "/Course/javasweb/JavaScript/javascriptshl/20061218/1223 .html "target =" _ blank "> JS" Tree "reads XML data </a> <br> <a href ="/Course/parse Web/JavaScript/javascriptshl/200721/4597 .html" target = "_ blank"> solve window by passing parameters. loss of Open Session variables </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4693 .html" target = "_ blank"> right-click the shortcut menu </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4287 .html" target = "_ blank"> A Div + CSS navigation bar results </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4396 .html" target = "_ blank"> detailed analysis of Gmail applications </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4126 .html" target = "_ blank"> JS development dictionary detection username or password tool </A> <br> <a href = "/Course/courier Web/JavaScript/javascriptshl/200721/4715 .html" target = "_ blank"> random display of images on the webpage </a> <br> <a href = "/Course/javasweb/JavaScript/javascriptshl/200721/4606 .html" target = "_ blank"> Ajax-based application architecture summary </a> </ div>
</TD>
</Tr> </tbody> </table>
</Div>
<Div style = "clear: Both; Background: # FFF; overflow: hidden; Height: 8px"> </div>
<Div class = "cleanblock2" style = "Background: # ededed; Border: 1px solid # dedfde"> <Div class = "cleanblock3"> <IFRAME name = "pindex" src = "/user/showcomment2.asp? C_id = 4361 "frameborder = false scrolling =" no "width =" 100% "Height =" 0 "class =" comm_index "onLoad =" window. setTimeout ('iframe _ resize () ', 1000) "> </iframe> </div>
<Div style = "clear: Both; Background: # FFF; overflow: hidden; Height: 8px"> </div>
<Form action = "/user/comment. asp? Id = 4361 & url = http://www.diybl.com/course/1_web/javascript/Javascriptshl/200721/4361.html "style =" margin-top: 0px; "method =" Post ">
<Div class = "comment_1">
<Div class = "cleanblock2"> <a name = "comment"> </a> <Div class = "cleanblock" style = "padding-left: 20px; padding-Right: 20px">
<Label for = "label"> nickname:
<Input name = "hypocorism" type = "text" size = "15" value = "DIY bloggers" onclick = "this. focus (); this. select () "maxlength =" 20 ">
<A href = "/user/register. ASP "target =" _ blank "> <font color = Red> registered member </font> </a> <a href ="/user/login. ASP "target =" _ blank "> member logon </a>
<Br/>
<Span style = "line-Height: 25px"> <a href = "/user/chgpage/Cata. asp? Num = 1010802 "target =" _ blank "> <font color =" #990000 "> <strong> click here </strong> </font> </a> </span> Create a CHM e-book tutorial by yourself
<Textarea name = "content" style = "vertical-align: Text-top; width: 100%; Height: 7em" rows = "6" onfocus = "showchk ();">