Desplazamientos de textos 'Marquee'

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>

... texto ...

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="border: 2px solid green; background-color: #FF0; 
font-size: 16px; font-family: Impact; color: #F00;">
Esto se ve con la fuente Impact
</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">
 ... El texto se desplaza a la derecha ...
</marquee>

... El texto se desplaza a la derecha ...

<marquee direction="left">
 ... El texto se desplaza a la Izquierda ...
</marquee>

... El texto se desplaza a la izquierda ...

<marquee direction="up">
 ... El texto se desplaza hacia arriba ...
</marquee>

... El texto se desplaza hacia arriba ...

<marquee direction="down">
 ... El texto se desplaza hacia abajo ...
</marquee>

... El texto se desplaza hacia abajo ...

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

<marquee scrolldelay="300">
Velocidad=300
</marquee>
<marquee scrolldelay="150">
Velocidad=150
</marquee>
<marquee scrolldelay="100">
Velocidad=100
</marquee>

Velocidad=300 Velocidad=150 Velocidad=100

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:

<marquee scrollamount="50">
Velocidad=50
</marquee>
<marquee scrollamount="10">
Velocidad=10
</marquee>
<marquee scrollamount="5">
Velocidad=5
</marquee>

Velocidad=50 Velocidad=10 Velocidad=5

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.

<marquee behavior="scroll">
behavior="scroll"
</marque>
<marquee behavior="slide">
behavior="slide"
</marque>
<marquee behavior="alternate">
behavior="alternate"
</marque>

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:

<marquee direction="right">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-FmGoUYcAVfI/Ueba2fzb52I/AAAAAAAAJ2Q/
U3oP94-qno8/s1600/1002699_10151708689651812_1699006245_n.jpg" 
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
><img border="0" src="http://1.bp.blogspot.com/-FmGoUYcAVfI/Ueba2fzb52I/
AAAAAAAAJ2Q/U3oP94-qno8/s320/1002699_10151708689651812_1699006245_n.jpg" 
/></a></div>
</marquee>

<marquee>
<table border="1"><tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
<tbody><table>
</marquee>

1	2	3
4	5	6
7	8	9

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

<marquee direction="up" id="ejemplo">
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset; 
</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>

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;


Hacia abajo Hacia arriba