Visualización progresiva (dcha.-izqda.)
Compatibilidad:
Ms Internet Explorer
,
Netscape
Demo muy similar a la precedente: la única diferencia es que la visualización se lleva a cabo desde los laterals derecho e izquierdo hacia el interior.
[
Muestra el ejemplo práctico
]
el código para insertar en tu página
<!-- w w w . h t m l p o i n t . c o m --> <HTML> <HEAD> <!-- Código descargado gratuitamente de HTMLpoint, el sitio italiano del web publishing http://www.htmlpoint.com --> <TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var NS4 = document.layers; var IE4 = document.all; var the_code = ""; var the_width = 0; function initCode() { the_code = (document.layers) ? document.layers.curtain : document.all.curtain.style; } function resetIt(obj) // reset the object's clip values { if (NS4) { obj.clip.top = 0; obj.clip.right = 256; obj.clip.bottom = 46; obj.clip.left = 0; } else // IE requires you to specify all values each time if (IE4) obj.clip = "rect(0px 256px 46px 0px)"; } function wipeValue(obj, which) // return clip value to calling function { if (IE4) // in IE, the style.clip property returns a string value { var ie_clip_array = obj.clip.split(/\D+/); // remove any nondigit character and place in array using split method if (which == "t") return Number(ie_clip_array[0]); // now you can access individual values if (which == "r") return Number(ie_clip_array[1]); // return numeric value if (which == "b") return Number(ie_clip_array[2]); if (which == "l") return Number(ie_clip_array[3]); } } function startIt(obj, x_inc, time_inc, stop_width) // clip the object { if (NS4) { obj.clip.left += -(x_inc/2); obj.clip.right += (x_inc/2); } else // IE requires you to specify all values each time if (IE4) { obj.clip = "rect(" + "0px " + (this.wipeValue(obj,'r') + (x_inc/2)) + "px " + "46px " + (this.wipeValue(obj,'l') + -(x_inc/2)) + "px)"; } if (IE4) the_width = ((this.wipeValue(obj, 'r')) - (this.wipeValue(obj, 'l'))); if (NS4) the_width = obj.clip.width; if (the_width < 0) { if (NS4) obj.clip.width = 0; } if (((x_inc < 0) && (the_width > stop_width)) || ((x_inc > 0) && (the_width < stop_width))) { setTimeout("startIt(the_code," + x_inc + "," + time_inc + "," + stop_width + ")", time_inc); } } // --> </SCRIPT> </HEAD> <BODY bgcolor="white" ONLOAD="self.focus(); initCode();"> <FORM NAME="my_form" ONSUBMIT="0"><INPUT TYPE="BUTTON" NAME="reset" VALUE="RESET" ONCLICK="resetIt(the_code)"><INPUT TYPE="BUTTON" NAME="start" VALUE="START" ONCLICK="startIt(the_code, -4, 15, 0)"></FORM> <DIV ID="curtain" STYLE="left:182; top:150; width:256; height:46; clip:rect(0,256,46,0); position:absolute; visibility:visible;"> <IMG SRC="orange.gif" WIDTH="256" HEIGHT="46" ALT=""></DIV> </body> </html> <!-- w w w . h t m l p o i n t . c o m -->
[
Baja en un único archivo .zip,
las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]
