Cita:
|
Empezado por Deiv
Ok, con crear esa capa, pero como le mando hacer el opacity o el alphablend? ¿Cuál sería el código por fa?
|
El codígo podría ser algo como :
Página html :
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade Out</title>
<script type="text/javascript" src="lib/funcion.js"></script>
</head>
<body>
<div>
<div id="inferior"
style="background-color:#FF0000;width:500px height:500px;z-index:1;position:absolute;top:0px;left:0px">
</div>
<div id="superior"
style="background-color:#555;width:500px;height:500px;z-index:2;position:absolute;top:0px;left:0px;filter:Alpha(opacity=0);opacity:0">
</div>
</div>
</body>
</html>
Archivo javascript
Código:
var capa = null;
var opacidad = 0;
window.onload = function (){
capa = document.getElementById("superior");
capa.onclick = function Mostrar(){
if (opacidad < 70) {
opacidad += 1;
//Para IE
capa.style.filter = "alpha(opacity=" + opacidad + ")";
//Para firefox, opera y safari
capa.style.opacity = opacidad / 100;
if (opacidad < 70) {
setTimeout(Mostrar, 30)
}
} else {
opacidad = 0;
//Para IE
capa.style.filter = "alpha(opacity=" + opacidad + ")";
//Para firefox, opera y safari
capa.style.opacity = opacidad / 100;
}
}
}
Esto lo que hace es aplicar el estilo fade out al pinchar sobre la capa superior. El ejemplo está hecho a las prisas por lo que puse el estilo mezclado con el código html, pero te recomendaría que lo pusieses a parte en una hoja de estilos.
Como comenta David(que es el que sabe) si necesitas hacer mas modificaciones del DOM en otras partes de tu aplicación web lo mejor es que instales un framework, y volviendo al consejo del Sabio, jQuery es de los mejores.
Un saúdo.
28-01-2009
Temas Similares
Modo Hilado