Marquesina de luces animadas.

furoya · #1 (**permalink**) 29/10/2007, 15:07

El título no se refiere a la clásica marquee de IE. Y el efecto es en realidad bastante elemental. Quien tenga edad suficiente para recordar las "luces sicodélicas" lo va a reconocer en seguida. Está aquí nada más porque ya había colgado la imagen para otro tema.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>BROADWAY. </title>
<script type="text/javascript">
var elAncho , elAlto , elTexto;
var lamp = new Image();
lamp.src = "http://img145.imageshack.us/img145/8876/lamp1cf6.gif";
var lampLado = "20";
var lampOrden = 0;
var totalLamp;

function inicio(){
elTexto = document.getElementById("texto");
elAncho = elTexto.offsetWidth;
elAlto = elTexto.offsetHeight;
var lampHor = parseInt(elAncho / lampLado)+1;
var lampVer = parseInt(elAlto / lampLado)+1;
totalLamp = lampHor*2 + lampVer*2 + 4;
var ajuste = totalLamp % 3;
var contLampHor = contLampVer = "";

if(ajuste != 0){
lampVer += 1;
if(ajuste == 2){
lampHor += 1;}
}
totalLamp = lampHor*2 + lampVer*2 + 4;

document.getElementById("no").innerHTML = "<img src=" +lamp.src+ " id='lamp0' class=apagado>";

for(l=0; l<lampHor; l++){
lampOrden += 1
contLampHor += "<img src=" +lamp.src+ " id='lamp" +lampOrden+ "' class=apagado>";
}
document.getElementById("n").innerHTML = contLampHor;
contLampHor = "";

lampOrden += 1

document.getElementById("ne").innerHTML = "<img src=" +lamp.src+ " id='lamp" +lampOrden+ "' class=apagado>";

for(l=0; l<lampVer; l++){
lampOrden += 1
contLampVer += "<img src=" +lamp.src+ " id='lamp" +lampOrden+ "' class=apagado>";
}

lampOrden += 1

document.getElementById("e").innerHTML = contLampVer;
contLampVer = ""

document.getElementById("se").innerHTML = "<img src=" +lamp.src+ " id='lamp" +lampOrden+ "' class=apagado>";

for(l=0; l<lampHor; l++){
lampOrden += 1
contLampHor = "<img src=" +lamp.src+ " id='lamp" +lampOrden+ "' class=apagado>" + contLampHor;
}
document.getElementById("s").innerHTML = contLampHor;
contLampHor = "";

lampOrden += 1

document.getElementById("so").innerHTML = "<img src=" +lamp.src+ " id='lamp" +lampOrden+ "' class=apagado>";

for(l=0; l<lampVer; l++){
lampOrden += 1
contLampVer = "<img src=" +lamp.src+ " id='lamp" +lampOrden+ "' class=apagado>" + contLampVer;
}
document.getElementById("o").innerHTML = contLampVer;
contLampVer = ""

setTimeout("luz0E()", 1100);
setTimeout("luz1E()", 1300);
setTimeout("luz2E()", 1500);
}

function luz0E(){
for(m=0; m<totalLamp; m=m+3){
document.getElementById("lamp" +m+ "").className = "encendido";
}
setTimeout("luz0A()", 300);
}
function luz0A(){
for(m=0; m<totalLamp; m=m+3){
document.getElementById("lamp" +m+ "").className = "apagado";
}
setTimeout("luz0E()", 300);
}

function luz1E(){
for(m=1; m<totalLamp; m=m+3){
document.getElementById("lamp" +m+ "").className = "encendido";
}
setTimeout("luz1A()", 333);
}
function luz1A(){
for(m=1; m<totalLamp; m=m+3){
document.getElementById("lamp" +m+ "").className = "apagado";
}
setTimeout("luz1E()", 333);
}

function luz2E(){
for(m=2; m<totalLamp; m=m+3){
document.getElementById("lamp" +m+ "").className = "encendido";
}
setTimeout("luz2A()", 366);
}
function luz2A(){
for(m=2; m<totalLamp; m=m+3){
document.getElementById("lamp" +m+ "").className = "apagado";
}
setTimeout("luz2E()", 366);
}

onload = inicio;
</script>
<style type="text/css">

body {color:#ffffff; background-color:#000000;}
#cartel {margin-left:200px;; }
#cartel , #cartel img {border-collapse:collapse; }
#cartel td {text-align:center; vertical-align:center; background-color:#000000;}
#o , #e {width:20px;}
.encendido {background-color:#daa520;}
.apagado {background-color:#222222;}
</style>
</head>
<body>
<h2>Efecto "borde con marquesina de luces".</h2>

<table id=cartel celpadding=0 cellspacing=0><tbody><tr>
<td id=no></td><td id=n></td><td id=ne></td>
</tr><tr>
<td id=o></td><td id=texto>
<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif">
</td><td id=e></td>
</tr><tr>
<td id=so></td><td id=s></td><td id=se></td>
</tr></tbody></table>

</body>
</html>

El mayor mérito no está en la secuencia aleatoria de las luces, sino en que el escript calcula su cantidad y las medidas del cartel basándose en el tamaño del contenido.
En el ejemplo usé una tabla que -por supuesto- se puede cambiar por div's, si alguien tiene ganas de trabajar un poco más.