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