Está en: Recursos web Javascript - Movimiento de capas

Movimiento de capas con Javascript:




Con este script controlamos el movimiento de una capa a través de dos botones, lo probamos:

Empezamos creando en el cuerpo del archivo html una div llamada contenido a la que aplicaremos el movimiento. Insertamos dos imágenes con forma de botón para que llamen a la función plegar() y desplegar() que posteriorme explicaremos.

<div id="botones" style="width:600px; height:20px;">
<input type="image" id="recoger" onclick="plegar()" src="imagenes/up.gif"/>
<input type="image" id="desplegar" onclick="desplegar()" src="imagenes/down.gif" />
</div>
<div id="contenido" style="width:720px; height:305px; background-color:#006699; position:relative;"></div>


Ahora entre las etiquetas <head></head> el script:

<script language="javascript" type="text/javascript">
<!--


Lo que hacemos en este script es ordenar que cuando se ejecute la función plegar(), la capa disminuya de altura (propiedad height) hasta que sea 0. Y con la función desplegar() realizamos el mismo proceso ordenando que se detenga exactamente en 305px. Para poder llevar a cabo este proceso, primero capturamos en una variable la altura inicial de la capa y después realizamos las condicionales:

var temporizadorplegar;
var temporizadordesplegar;

function plegar(){
clearTimeout(temporizadordesplegar);
var altura=parseInt(document.getElementById("contenido").style.height);

if(altura>0)
{
altura--;
document.getElementById("contenido").style.height=altura+"px";
temporizadorplegar=setTimeout("plegar()",10);
}
else
{
clearTimeout(temporizadorplegar);
}
}

function desplegar(){
clearTimeout(temporizadorplegar);
var altura=parseInt(document.getElementById("contenido").style.height);

if(altura<305){
altura++;
document.getElementById("contenido").style.height=altura+"px";
temporizadordesplegar=setTimeout("desplegar()",10);
}
else
{
clearTimeout(temporizadordesplegar);
}
}
//-->
</script>


Inicio / Servicios Web / Recursos Web / Portfolio / Enlaces / Contacto / Sitemap / Aviso Legal

Hu Creative Web Site - info@hucreative.com
www.hucreative.com