JavaScript to achieve classic image switching effect

Javascript

CSS Filters: pixelate

Pixelate Compatibility: ie5.5+

Grammar:

Filter:progid:DXImageTransform.Microsoft.Pixelate (enabled=benabled, duration=fduration, Maxsquare=iwidth)

Property

Enabled:  Optional. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False true:  default value. Filter activation.
False: The  filter is prohibited.

Duration:  options available. Floating-point number (real). Sets or retrieves the time that the transformation took to complete. The value is in seconds. MS (0.0000) format.
You can set the duration of the conversion playback using the Iduration parameter of the play method. However, once you call the Play method, the Duration feature becomes read-only during playback duration.
Maxsquare:  options available. Integer value (integer). Sets or retrieves the maximum width of a rectangular color block in a transformation. The value range is 2-50. The default value is 50.

Characteristics:

Enabled:  can read and write. A Boolean value (Boolean). See the Enabled property.
Duration:  can read and write. Floating-point number (real). See Duration properties.
Maxsquare:  can read and write. Integer value (integer). See Maxsquare properties.
Percent:  can read and write. String. Sets or retrieves the point where the current static filter output is in the conversion process. The value range is 0-100. The default value is 0, and the conversion has not started. 100 for conversion complete.
This attribute can be used to establish a static filter effect using a transform filter. Sets its value equal to the point that defines the stop of the transformation process. To establish a static filter effect using the transform filter, follow these steps:
The Apply method that uses the transform filter. This captures the initial display of the object's content, setting the Percent attribute value to 0.
Change the content of the object. such as visibility, innertext, Background-color, Border, or the properties of its child objects.
Sets the Percent attribute of the conversion filter. That is, identify a point in the transformation process that you want. This captures a content image at that point in the transformation process.
Sets the Enabled attribute value of the transform filter to True. The filter Action object updates its contents based on the image that is acquired.
Note that you can only use the Visibility property to change the object's child objects. Otherwise, direct changes to the child object are immediately displayed without being captured by the transform filter.
Status:  Read only. Integer value (integer). Retrieves the current state of the transformation. 0 | 1 | 2 0:  conversion Stop (stop).
1:  conversion is applied (apply).
2:  conversion in progress (play).

Method:

Apply:  captures the initial display of the object's content, making the necessary preparation for the conversion. no return value.
When this method is invoked, any changes to the object's properties will not be displayed until you invoke the play method to begin the conversion.
Note that you can only use the Visibility property to change the object's child objects. Otherwise, direct changes to the child object are immediately displayed without being captured by the transform filter.
When you call the Play method, the transformation renders the result of the change in the content (the object's properties and the visibility property of the child object).
Play (Iduration):  begins the conversion. no return value. The parameters are shown in the table below.
Iduration:  options available. Floating-point number (real). Specifies how long the filter action lasts. The default unit is seconds.
Sets the duration of the conversion playback using the Iduration parameter of the play method, whose value replaces the setting of the Duration property during the current cycle of the transformation. However, the next conversion restores the value set using the Duration property.

STOP:  stops converting playback. and renders the transformation result image. Also fires the onfilterchange event. no return value.

Description

This conversion filter is a complex visual effect. In the first half of the transformation, the content of the object is first displayed as a rectangular color tile, and then the width of the rectangle is increased by one pixel to the value set by the Maxsquare property. The color of each rectangle is determined by the average color of the pixels in the area in which it is covered. The next half of the transition, the rectangle is restored to the new content of the specific image pixel, showing the new content.
Set the Enabled attribute value of this filter to false before using this conversion filter. This prevents a static filter that has a color tile effect before the conversion takes effect on the content of the object first.

Run Code Box

<ptml xmlns:rdl><pead><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;p adding:4px;position:absolute;z-index : 3;visibility:hidden;} #idDiv2 {width:200px;height:100px;background-color: #000000; color: #FFFFFF;p adding:4px;position:absolute;z-index:4;visibility:visible;} #idCodeDiv {width:100%;p adding: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></pead><body><div Id=idparentdiv><div id=idDiv1> I am the input <b> a </b> of the synthetic filters obtained. </div><div id=iddiv2> I am the input <b> b </b> of the synthetic filter obtained. </div></div><br><table><tr><td><select id=idSel1 ><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= "a" >12</select></td><td><select Id=idSel2 ><option value= "50" Style= "Font-weight:bold;" >---maxsquare---<option value= "a" >25<option value= "ten" >10<option value= "5" >5</select> </td><td><input Type=button value= "Play" ></td><td><input Type=button value= "Stop" ></td></tr></table><br><div Id=idcodediv>filter:progid:d XImageTransform.Microsoft.Pixelate (enabled= "false") </div><br> <br> <br>< Div id=id_div3> Su Ying Works • All rights reserved <br><span id=id_span3>©2002 Rainer Su. All rights reserved .</span></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The effect of Forestgan writing is as follows:

<script language= "JavaScript1.1" >var slidespeed=3000//specify imagesvar slideimages=new Array ("/uploadpic/ 2007-7/200777165613783.jpg "," 2482150_2_1.jpg "," 2482150_3_2.jpg ")//specify corresponding Linksvar slidelinks=new Array ("#", "#", "#") var imageholder=new array () var ie55=window.createpopupfor (i=0;i<slideimages.length;i++) { Imageholder[i]=new Image () imageholder[i].src=slideimages[i]}function gotoshow () {window.location=slidelinks[ Whichlink]}//--></script><a href= "Javascript:gotoshow ()" ></a><script language=" JavaScript1.1 "><!--var whichlink=0var whichimage=0var Pixeldelay= (ie55)? Document.images.slide.filters[0].duration*1000:0function Slideit () {if (!document.images) returnif (Ie55) Document.images.slide.filters[0].apply () Document.images.slide.src=imageholder[whichimage].srcif (Ie55) documenT.images.slide.filters[0].play () whichlink=whichimagewhichimage= (whichimage<slideimages.length-1)? Whichimage+1:0settimeout ("Slideit ()", Slidespeed+pixeldelay)}slideit ()//--></script>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]