Hola todos :
Me pareció notar un dejo de fastidio en tu último mensaje,
lobbys. Que hasta sería justificable : todos te decimos qué no debes usar, pero nadie te sugiere opciones.
El problema de
marquee no es que sea "viejo" (
div y
table son todavía más antiguos, y los usa todo el mundo), sino que es código propietario; aunque como es compatible con casi todos los navegadores, tampoco ése debería ser un inconveniente. Bueno, para ti sí, porque algunos parámetros, valores y eventos no son tan "compatibles", y así no te va a servir de mucho. Pero eso lo vamos a ver más abajo.
Quizá la mejor discusión sería si apoyamos o no las animaciones HTML o CSS (en realidad DHTML y ... ¿
DCSS?). Algo que también vamos a dejar para más adelante.
Como insinuó
Hocker, tu pregunta no es clara. Y no podemos estar interrogándote o tirando ejemplos para ver si de casualidad la pegamos con lo que buscas. (Que, en fin, es lo que voy a terminar haciendo.)
Pero antes te cuento una breve historia.
Hace poco respondí a una consulta sobre una
scrollbar; y resultó que el autor llamaba "
scrollbar" no a la barra de desplazamiento sino al bloque con contenido que a un lado tenía una
scrollbar. Esta suerte de metonimia es la que nos complica a la hora de responderles.
¿Qué pasaría si estás llamando "
marquesina" al contenido que se despalza y no al objeto
marquee (en realidad, al 'elemento
marquee'; no nos apuremos, recién más abajo va a ser un 'objeto') el ejemplo sería entonces relativamente fácil. Si hay que pasar una palabra, y recién cuando esta desaparece debe salir la siguiente, alcanza con separarlas la misma distancia que tenga de largo el elemento
marquee.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>WORD SPACING.</title>
<style type="text/css">
marquee {border: 1px solid red; margin-top: 20px; width: 500px; color: #800000; }
marquee p {margin: 0; background-color: #cccccc; white-space: nowrap; word-spacing: 500px; font: normal normal 900 32px/normal fantasy, cursive; }
</style>
</head>
<body>
<h2>Marquesina con palabras espaciadas. IE, FF, Op, Chr, Saf</h2>
<marquee><p>FOROS DEL WEB</p></marquee>
<p>Cuando termina de pasar una palabra, comienza a pasar la siguiente.</p>
</body>
</html> En
IE 6+ funciona muy bien; pero los demás navegadores tienen problemas con los porcentajes. Por eso el ejemplo tiene ancho fijo.
Por supuesto que no debe ser lo que estás buscando. Más bien serán unas etiquetas
marquee encadenadas, para que cuando termine el
loop de la primera, se dispare la segunda.
Para eso se usan los eventos. Más exactamente
onfinish, que se ejecuta cuando la marquesina termina de rotar.
¿La mala noticia? Es JScript (lenguaje propietario de
Microsoft). Aún así,
Firefox lo reconoce como un evento javascript propietario de
Mozilla. Los demás, no. ¡Ni
Opera!. Por lo que esto tampoco te sirve.
Igual te dejo un ejemplo.
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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>MARQUEE ONFINISH.</title>
<script type="text/javascript">
function end(mqsn){
document.getElementById(mqsn).scrollAmount = "5";
}
</script>
<style type="text/css">
marquee {¬border: 1px solid red; margin-top: 20px; font: 900 32px fantasy, cursive; letter-spacing: 32px; width: 50%; color: #800000; }
</style>
</head>
<body>
<h2>Marquesinas encadenadas. (IE5.5+ / FF3.5)</h2>
<marquee loop="1" behavior="slide" scrollamount="5" direction="left" onfinish="end('segunda')" id=primera>FOROS</marquee>
<p></p>
<marquee loop="1" behavior="slide" scrollamount="0" direction="right" onfinish="end('tercera')" id=segunda>DEL</marquee>
<p></p>
<marquee loop="1" behavior="slide" scrollamount="0" direction="left" id=tercera>WEB</marquee>
<p>Al detenerse la anterior, se dispara la siguiente.</p>
</body>
</html> Lo mejor entonces es simular unas marquesinas con javascript y hacer todas las animaciones con este lenguaje.
Hay montones de ejemplos en el Foro y en la web; y para hacer el tuyo "a medida" deberíamos saber exactamente qué es lo que quieres. De todas las posibilidades, elegí ésta
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>MARQUEE JS.</title>
<script type="text/javascript">
var marquesinas = ["primera", "segunda", "tercera"];
var suma = 5; //scrollamount en pixeles
var velocidad = 50; //scrolldelay en milisegundos
function inicia(){
for(i=0; i<marquesinas.length; i++){
var mrq = document.getElementById( marquesinas[i] );
var ancho = mrq.offsetWidth;
mrq.style.paddingLeft = ancho + "px";
}
desplaza();
}
function desplaza(){
var mrq = document.getElementById( marquesinas[0] );
if(parseInt(mrq.style.paddingLeft) > suma){
mrq.style.paddingLeft = parseInt(mrq.style.paddingLeft) - suma + "px";
setTimeout("desplaza()", velocidad);
}
else{
mrq.style.paddingLeft = 0;
marquesinas.shift(); /*NO ME ACUERDO SI FUNCIONA EN IE6*/
if(marquesinas.length != 0){
desplaza();
}
}
}
window.onload = inicia;
</script>
<style type="text/css">
#primera, #segunda, #tercera {border: 2px solid #ff0000; margin: 10px 0; overflow: hidden; }
.mrqsn {font: normal normal 900 32px/normal fantasy, cursive; color: #800000; background-color: #cccccc; }
</style>
</head>
<body>
<h2>Marquesinas encadenadas, simuladas con javascript. IE, FF, Op, Chr</h2>
<div id=primera><span class=mrqsn>FOROS</span> </div>
<div id=segunda><span class=mrqsn>del</span> </div>
<div id=tercera><span class=mrqsn>WEB</span> </div>
<p>Desplaza hacia <tt>direction=left behavior=slide loop=1</tt>.</p>
</body>
</html> Algún método de
array (como
shift()) o alguna propiedad CSS (como
padding) me parece que no andaban en
IExplorer 6. Puede que haya que hacerle ajustes de compatibilidad.
O escribirlo todo de nuevo, si no es lo que buscabas.
Ayuda con JavaScript de marquesina afiliado Marquee: Stop and play Marquesina ascendente con cualquier clase de contenido! modificar codigo scroll texto que sobrepasa div #14
Velocidad para el Marquee Etiqueta "nobr" no aceptada http://www.mozilla.org/docs/dom/samp...despacing.html http://www.mozilla.org/docs/dom/samp...olorfades.html http://msdn.microsoft.com/en-us/libr...51(VS.85).aspx