Cómo desplazar una marquesina en JavaScript

La etiqueta de marquesina es un elemento HTML no estándar infame que se remonta a los primeros años de la World Wide Web. Contenido colocado en una marquesina se desplaza a través de ella una y otra vez, que atrae la atención del usuario. La etiqueta de marquesina en HTML es obsoleto y su uso está desaconsejado por la mayoría de los desarrolladores web. Sin embargo, puede resucitar el elemento de marquesina en sus páginas web utilizando código JavaScript y CSS.

Instrucciones

1 Coloque el siguiente código JavaScript entre las etiquetas "cabeza" de su documento HTML:

<Script type = "text / javascript">

retardo var = 10, cantidad = 1;

función scrollMarquee (id) {

var ref=document.getElementById(id);

ref.scrollLeft + = cantidad;

si (ref.scrollLeft> = ref.scrollWidth - ref.offsetWidth) {

ref.scrollLeft = 0;

}

setTimeout ( "scrollMarquee ( '" + ID + "');", retardo);

}

</ Script>

2 Agregue el siguiente código CSS entre las etiquetas "cabeza" de su documento HTML:

<Style type = "text / css">

.marquesina{

sobrecarga oculta;

white-space: nowrap;

}

.almohadilla{

display: inline-block;

width: 100%;

}

</ Style>

3 Agregue el código siguiente en el cuerpo del documento HTML en el que desea colocar un marco:

<Div class = id = estilo "marquee1" "carpa" = "width: 150px;"> <span class = "pad"> </ span>

contenido carpa va aquí

<Span class = "pad"> </ span> </ div> <script type = "text / javascript"> scrollMarquee ( 'marquee1'); </ script>

Especificar el ancho de la carpa en el atributo "estilo" de la etiqueta "div". Puede utilizar píxeles (px) o porcentaje del ancho de página (%). Coloque el contenido de la marquesina entre la primera y la última línea. Puede incluir cualquier contenido HTML que te gusta. Si desea hacer otra carpa, simplemente pegar el código de nuevo en otro lugar de la página, y cambiar el atributo "id" de la etiqueta "div" y el argumento de la llamada "scrollMarquee" a un nombre único, como "marquee2 ".

Consejos y advertencias

• Ajuste el retardo variables "" "cantidad" y en el código JavaScript para cambiar la velocidad de la marquesina. "Cantidad" es el número de píxeles de la marquesina se desplaza cada vez que se desplaza, y "retraso" es la cantidad de tiempo entre cada desplazamiento en milisegundos.