Hola a todos,
Por pedido de un par de clientes tuve que implementar un efecto
marquesina para noticias de "último momento". Intenté que fuera lo más
accesible posible y, en principio, funciona. Faltarían algunos detalles
para mejorarlo, pero les envío el código para conocer opiniones.
Saludos,
Javascript:
function avanzarChar() {
if (i == 0) document.getElementById("n" + n).style.height = "auto";
l = texto[n].length;
document.getElementById("n" + n).innerHTML = "<span>" +
texto[n].substring(0, x) + "</span>" + texto[n].substring(x, i) +
"<span>" + texto[n].substring(i, l+1) + "</span>";
i++;
if (i > 70) x++;
if (i == l+1) {
i = 0;
x = 0;
document.getElementById("n" + n).innerHTML = texto[n];
document.getElementById("n" + n).style.height = "0";
n++;
if (!texto[n]) n = 0;
}
}
function ultimoInit() {
n = 0;
texto = new Array();
while (document.getElementById("n" + n)) {
texto[n] = document.getElementById("n" + n).innerHTML;
n++;
}
n = 0;
i = 0;
x = 0;
if (texto[n]) setInterval("avanzarChar();", 150);
}
window.onload = ultimoInit;
HTML:
<div id="ultimo-momento">
<ul>
<li id="n0">14:53 | Contra la inflación: Ya está reunida por primera vez
la “Liga de seguimiento de precios”</li>
<li id="n1">19:00 | El crudo se acerca de nuevo a u$s60 al cierre de la
semana</li>
</ul>
</div>
CSS:
#ultimo-momento li {height: 0; overflow: hidden; font-size: 1.1em;
color: #C53049; font-weight: bold; }
#ultimo-momento li span {letter-spacing: -999em; visibility: hidden; }
CSS sólo para IE:
#ultimo-momento ul {position: relative; }
#ultimo-momento li {position: absolute; }
#ultimo-momento li span {display: none; }
--
Camilo Kawerín
27Sur comunicación & diseño
http://www.27sur.com
Recuerde *RESPONDER* a este mail, así puedo hacer un seguimiento de la
conversación.
_______________________________________________
javaEScript mailing list
[email protected]
http://lists.scriptia.net/listinfo.cgi/javaescript-scriptia.net
