Desplazamientos de textos (MARQUEE)

JMiur

La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda.

Esta es una marquesina por defecto.

Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina:

<marquee width="50%" height="60" align="bottom">
... texto ...
</marquee>

Esta marquesina ocupa el 50% del ancho, tiene una altura de 60 pixels y está alineada con la parte inferior.

El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el atributo STYLE, podemos establecer cualquier propiedad, de manera similar al resto de las etiquetas HTML:

Esto se ve con la fuente Impact

<marquee style="...propiedades...">
... texto ...
</marquee>

Para controlar más efectivamente las marquesinas, existen una serie de atributos especiales:

DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down:

<marquee direction="right">
... texto ...
</marquee>

El texto se desplaza de izquieda a derecha.

El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.

Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento expresado en milisegundos:

<marquee scrolldelay="300">
... texto ...
</marquee>

Velocidad = 100.
Velocidad = 150.
Velocidad = 300.

LOOP indica el número de veces que aparecerá el texto y por defecto, es infinito.

Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza:

Desplazamiento = 5.
Desplazamiento = 10.
Desplazamiento = 50.

Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a efectuar el desplazamiento y puede tener los siguientes valores:

scroll (valor por defecto), aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar
slide aparece por un lado, se desplaza y se detiene (sólo funciona en Internet Explorer).
alternate se desplaza alternativamente hacia un lado y el otro.

Behavior = scroll.
Behavior = slide.
Behavior = alternate.

Las marquesinas no sólo pueden contener textos, también pueden contener otros elementos, por ejemplo, imágenes, vínculos o tablas:

Una tabla
Celda A	Celda B
Celda C	Celda C

¿Podemos controlar una marquesina mientras se ejecuta? Aquí hay un ejemplo simple, mediante dos pseudo-botones, logramos cambiarle la dirección:

Hacia abajo Hacia arriba

<marquee id="ejemplo" direction="up">
... contenido ...
</marquee>

<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">
Hacia abajo
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">
Hacia arriba
</a>