Efecto en capa

isabelramirezmontoya · #1 (**permalink**) 11/12/2012, 09:56

Chicos tengo una duda, me colaboran por favor

Tengo una capa que se abre al presionar un boton, funciona bien.

Quisiera saber si es posible tener un efecto sobre la capa de forma tal que se abra/cargue no de forma instantanea como lo hace en este momento, si no que se abra/cargue en forma mas elegante por ejemplo en forma de cortina de "arriba hacia abajo"

Código HTML:

Ver original<html>
 
<head>
 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
 
<title>Prueba</title>
 
<script type="text/javascript">
        
function abrir_capa()
{
   var ventana = document.getElementById('capa');
   ventana.style.display = 'block';
}
 
function cerrar_capa()
{
    var ventana = document.getElementById('capa');
    ventana.style.display = 'none';
}
 
</script>
 
</head>
 
<div><a id="boton" href="javascript:abrir_capa()">Abrir capa</a></div>
 
<div id="capa" style="position: fixed; width: 350px; height: 350px; top: 50; left: 250; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 1px solid; background-color: #FFFFFF; color: #000000; display:none;">
 <div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Capa</div>
 
<center>** abc **</center> 
 
 <div style="padding: 4px; text-align: center; margin-top: 275px;"><input onclick="cerrar_capa" name="btnAceptar" size="20" type="button" value=" Cerrar " /></div>
</div>
 
</body>
</html>

Gracias

David · #2 (**permalink**) 11/12/2012, 10:03

Revisa este tema, es parecido a lo que necesitas:
http://www.forosdelweb.com/f13/despl...oculto-605959/

IsaBelM · #3 (**permalink**) 11/12/2012, 15:32

puede ser un efecto cortina que aumente horizontal y después verticalmente

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

.contenedor {
width: 100%;
height: auto;
background-color: rgba(109, 106, 107, 0.85);
}

.contenedor span {
float:left;
}

.contenedor span.url {
width: 26px;
height: 28px;
margin: 0 7px;
}

.contenedor span.url a img {
width: 26px;
height: 28px;
border: 1px solid #FFF;
z-index: auto;
}

.contenedor span.url a:hover img {
z-index: 99;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
</style>
<script type="text/javascript">
function Evento(elemento,nomevento,funcion) {

var fct=function(){
funcion.call(elemento,window.event);
}
elemento.attachEvent('on'+nomevento,fct);
return true;

}

window.onload = function() {

var thumb = document.querySelector('.contenedor').getElementsB yTagName('img');
for (var i = 0; i < thumb.length; i++) {

if(document.addEventListener) {

thumb[i].addEventListener('mouseover', function() {this.style.zIndex = 99; transAumenta(this, parseInt(document.defaultView.getComputedStyle(thi s, null).getPropertyValue('width')), parseInt(document.defaultView.getComputedStyle(thi s, null).getPropertyValue('height')))}, false);
thumb[i].addEventListener('mouseout', function() {clearTimeout(intervalo); this.style.border = "1px solid #FFF"; transDisminuye(this, parseInt(this.style.width), parseInt(this.style.height))}, false);

} else { // ie8-

Evento(thumb[i], 'mouseover', function() {this.style.zIndex = 99; transAumenta(this, parseInt(document.styleSheets[0].rules[5].style['width']), parseInt(document.styleSheets[0].rules[5].style['height']))});
Evento(thumb[i], 'mouseout', function() {clearTimeout(intervalo); this.style.border = "1px solid #FFF"; transDisminuye(this, parseInt(this.style.width), parseInt(this.style.height))});

}

}
};

var intervalo;

function transAumenta(bloque, ancho, alto) {

if (ancho <= 90) {
ancho +=3;
bloque.style.width = ancho + 'px';
intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto)}, 8);

} else if (alto <= 97) {
alto += 3;
bloque.style.height = alto + 'px';
intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto)}, 8);
}

}

function transDisminuye(bloque, ancho, alto) {

if (alto >= 31) {
alto -= 3;
bloque.style.height = alto + 'px';
setTimeout(function(){transDisminuye(bloque, ancho, alto)}, 8);

} else if (ancho >= 29) {
ancho -=3;
bloque.style.width = ancho + 'px';
setTimeout(function(){transDisminuye(bloque, ancho, alto)}, 8);

} else {
bloque.style.zIndex = 'auto';
}
}
</script>
</head>
<body>

<div class="contenedor clearfix">
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim01t.jpg" title="i1" alt="i1"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim02t.jpg" title="i2" alt="i2"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim03t.jpg" title="i3" alt="i3"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim05t.jpg" title="i4" alt="i4"></a></span>
</div>

</body>
</html>