Tema: mostrar capa oculta con efecto cortina vertical
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 08/02/2014, 19:29
Avatar de djaevi
djaevi
 
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años, 11 meses
Puntos: 47
Respuesta: mostrar capa oculta con efecto cortina vertical
Algo asi te sirve? Pegalo en un html vacio y proba si es lo que te sirve:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title> Cortina </title>
  6.  
  7. <style>
  8.  
  9.     #container {
  10.         
  11.         position:absolute;
  12.         top:100px;
  13.         left:300px;
  14.         width:500px;
  15.         height:350px;
  16.         border:dashed black 1px;
  17.         
  18.     }
  19.     
  20.     #capa {     
  21.         position:absolute;
  22.         width:100%;
  23.         height:100%;
  24.         background-color:red;   
  25.         z-index:0;
  26.     }
  27.     
  28.     #cortina {
  29.         position:absolute;      
  30.         width:100%;
  31.         height:100%;
  32.         background-color:blue;  
  33.         z-index:1;
  34.     }
  35.  
  36. </style>
  37.  
  38. <script type="text/javascript">
  39.     
  40.     function abrir() {
  41.     
  42.         if (step > 0) {
  43.         
  44.             step += step_size;
  45.             
  46.             cortina.style.height = step + "%";
  47.             
  48.             cron = setTimeout('abrir()',100);
  49.             
  50.         }else{
  51.         
  52.             clearTimeout(cron);
  53.             
  54.         }
  55.             
  56.     }
  57.     
  58.     function init() {
  59.  
  60.         cron = null;
  61.     
  62.         step = 100;
  63.     
  64.         step_size = -5;
  65.         
  66.         cortina = document.getElementById("cortina");
  67.         
  68.     }
  69.  
  70. </script>
  71.  
  72. </head>
  73.  
  74. <body onload="init();">
  75.  
  76.     <div id="container">
  77.     
  78.         <div id="capa"></div>
  79.         <div id="cortina"></div>
  80.     
  81.     </div>
  82.     
  83.     <input type="button" onclick="abrir();" value="abrir" />
  84.  
  85. </body>
  86. </html>

Saludos!