Visualización progresiva
Compatibilidad:
Ms Internet Explorer
,
Netscape
Esta demo visualiza, desde el centro hacia afuera, una parte de página. Esta parte de página se esconde pulsando un botón "reset", con lo que se vuelve a la situación inicial.
[
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 the_code = ""; var NS4 = document.layers; var IE4 = document.all; var the_height = 0; var the_width = 0; function initCode() { the_code = (NS4) ? document.layers.curtain : document.all.curtain.style; } function resetIt(obj) // reset the object's clip values { if (NS4) { obj.clip.top = 75; obj.clip.right = 75; obj.clip.bottom = 75; obj.clip.left = 75; } else // IE requires you to specify all values each time if (IE4) obj.clip = "rect(75px 75px 75px 75px)"; } 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, y_inc, time_inc, stop_height) // clip the object { if (NS4) { obj.clip.top += -(y_inc/2); obj.clip.right += (y_inc/2); obj.clip.bottom += (y_inc/2); obj.clip.left += -(y_inc/2); } else // IE requires you to specify all values each time if (IE4) { obj.clip = "rect(" + (this.wipeValue(obj,'t') + -(y_inc/2)) + "px " + (this.wipeValue(obj,'r') + (y_inc/2)) + "px " + (this.wipeValue(obj,'b') + (y_inc/2)) + "px " + (this.wipeValue(obj,'l') + -(y_inc/2)) + "px)"; } if (IE4) the_height = ((this.wipeValue(obj, 'b')) - (this.wipeValue(obj, 't'))); if (NS4) the_height = obj.clip.height; if (NS4) the_width = obj.clip.width; if ((the_height > 150) || (the_width > 150)) { if (NS4) { obj.clip.height = 150; obj.clip.width = 150; } } if (((y_inc < 0) && (the_height > stop_height)) || ((y_inc > 0) && (the_height < stop_height))) { setTimeout("startIt(the_code," + y_inc + "," + time_inc + "," + stop_height + ")", 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, 45, 150)"></FORM> <DIV ID="curtain" STYLE="left:235; top:130; width:150; height:150; clip:rect(75, -75, -75, 75); position:absolute; visibility:visible;"> <IMG SRC="orange.gif" WIDTH="150" HEIGHT="150" 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]
