Array

Cómo crear una carpa de texto continua en JavaScript

Javascript over Binary Digits

Este código JavaScript moverá una sola cadena de texto que contenga cualquier texto que elija a través de un espacio de carpa horizontal sin interrupciones. Lo hace agregando una copia de la cadena de texto al comienzo del pergamino tan pronto como desaparece del final del espacio de la carpa. El script calcula automáticamente cuántas copias del contenido necesita crear para garantizar que nunca se quede sin texto en su carpa.

Sin embargo, este script tiene un par de limitaciones, por lo que nosotros y amp; apos; los cubriremos primero para que sepa exactamente lo que está obteniendo.

Video destacado

  • La única interacción que ofrece la carpa es la capacidad de detener el desplazamiento del texto cuando el & amp; # x200B; el mouse se cierne sobre la carpa. Comienza a moverse nuevamente cuando el mouse se ha alejado. Puede incluir enlaces en su texto, y la acción de detener el desplazamiento de texto facilita el clic de estos enlaces para los usuarios.
  • Puede tener varias carpas en la misma página con este script y puede especificar un texto diferente para cada una. Todas las carpas funcionan a la misma velocidad, & amp; amp; nbsp; sin embargo, lo que significa que una vuelta de mouse que detiene el desplazamiento de una carpa hace que todas las carpas en la página dejen de desplazarse.
  • El texto en cada carpa debe estar todo en una línea. Puede usar etiquetas HTML en línea para diseñar el texto, pero las etiquetas y etiquetas de bloque romperán el código.

Código para el & amp; amp; nbsp; Text Marquee & amp; amp; nbsp;

Lo primero que debe hacer para poder usar mi script continuo de carpa de texto es copiar el siguiente JavaScript y guardarlo como marquee.js.

This & amp; amp; nbsp; incluye el código de mis ejemplos, que agrega dos nuevos objetos mq que contienen la información sobre qué mostrar en esas dos carpas. Puede eliminar uno de esos y cambiar el otro para mostrar una carpa continua en su página o repetir esas declaraciones para agregar aún más carpas. La función mqRotate debe llamarse pasar mqr después de que las carpas se definan como que manejarán las rotaciones.

función start () {& lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; new mq (& amp; apos; m1 & amp; apos;); & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; new mq (& amp; apos; m2 & amp; apos;); & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; mqRotate (mqr); // debe venir último & lt; br & gt ;
} & lt; br & gt ;
window.onload = start; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt;

// Marquesina de texto continuo & lt; br & gt ;
// derechos de autor 30 de septiembre de 2009 por Stephen Chapman & lt; br & gt ;
// http://javascript.about.com
// se otorga permiso para usar este Javascript en su página web & lt; br & gt ;
// proporcionó que todo el código a continuación en este script (incluidos estos & lt; br & gt ;
// comentarios) se usa sin ninguna alteración & lt; br & gt ;
función objWidth (obj) {if (obj.offsetWidth) return & amp; amp; nbsp; obj.offsetWidth; & lt; br & gt ;
if (obj.clip) return obj.clip.width; return 0;} var mqr = []; función & lt; br & gt ;
mq (id) {this.mqo = document.getElementById (id); var wid = & lt; br & gt ;
objWidth (this.mqo.getElementsByTagName (& amp; apos; span & amp; apos;) [0]) + 5; var fulwid = & lt; br & gt ;
objWidth (this.mqo); var txt = & lt; br & gt ;
this.mqo.getElementsByTagName (& amp; apos; span & amp; apos;) [0] .innerHTML; this.mqo.innerHTML & lt; br & gt ;
= & amp; apos; & amp; apos ;; var heit = this.mqo.style.height; this.mqo.onmouseout = function () & lt; br & gt ;
{mqRotate (mqr);}; this.mqo.onmouseover = function () & lt; br & gt ;
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = & lt; br & gt ;
Math.ceil (fulwid / wid) + 1; para (var i = 0; i & amp; lt; & lt; br & gt ;
maxw; i ++) {this.mqo.ary [i] = document.createElement (& amp; apos; div & amp; apos;); & lt; br & gt ;
this.mqo.ary [i] .innerHTML = txt; this.mqo.ary [i] .style.position = & lt; br & gt ;
& amp; apos; absolute & amp; apos ;; this.mqo.ary [i] .style.left = (wid * i) + & amp; apos; px & amp; apos ;; & lt; br & gt ;
this.mqo.ary [i] .style.width = wid + & amp; apos; px & amp; apos ;; this.mqo.ary [i] .style.height = & lt; br & gt ;
heit this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);} & lt; br & gt ;
función mqRotate (mqr) {if (!mqr) retorno; para (var j = mqr.length – 1; j & lt; br & gt ;
& amp; gt; -1; j–) {maxa = mqr [j] .ary.length; para (var i = 0; imqr [j] .ary [i] .style; & amp; amp; nbsp; x.left = (parseInt (x.left, 10) -1) + & amp; px & amp; y amp; y & amp; y
mqr [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) & amp; lt; 0) & lt; br & gt ;
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) + & lt; br & gt ;
parseInt (z.style.width) * maxa) + & amp; apos; px & amp; apos ;; mqr [j] .ary.push (z);}} & lt; br & gt ;
mqr [0] .TO = setTimeout (& amp; apos; mqRotate (mqr) & amp; apos;, 10);} & lt; / br & gt; / br & gt; & br & gt; & gt; & gt; & gt; & gt; & lt; / br & gt;

A continuación, inserte & amp; amp; nbsp; el script en su página web agregando el siguiente código en la sección principal de su página:

Agregue un comando de hoja de estilo

Necesitamos agregar un comando de hoja de estilo para definir cómo se verá cada una de nuestras carpas.

Aquí & amp; apos; s el código que usamos para los de nuestro & amp; amp; nbsp; página de ejemplo:

.marquee {posición: relativa; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; desbordamiento: oculto; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; ancho: 500px; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; altura: 22px; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; border: negro sólido 1px; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp;} & lt; br & gt ;
.marquee span {white-space: newrap;} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt;

Puede colocarlo en su hoja de estilo externo si tiene una o encerrarla entre etiquetas en el encabezado de su página.

Puede cambiar cualquiera de estas propiedades para su carpa; Sin embargo, debe permanecer. posición: relativa & amp; amp; nbsp;

Coloque el marquesina en su página web

El siguiente paso es definir un div en su página web donde colocará la carpa de texto continua.

La primera de mis carpas de ejemplo usó este código:

El rápido zorro marrón saltó sobre el perro perezoso. Ella vende conchas marinas en la orilla del mar.

La clase asocia esto con el código de hoja de estilo. La identificación es lo que usaremos en la nueva llamada mq () para adjuntar la carpa de imágenes.

El contenido de texto real para la carpa entra dentro del div en una etiqueta de span. El ancho de la etiqueta span & amp; apos; s es lo que se utilizará como el ancho de cada iteración del contenido en la carpa (más 5 píxeles solo para separarlos entre sí).

Finalmente, asegúrese de que su código JavaScript para agregar el objeto mq después de que la página se carga contenga los valores correctos.

Here & amp; apos; s cómo se ve una de nuestras declaraciones de ejemplo:

nuevo mq (& amp; apos; m1 & amp; apos;) ;

El m1 es la identificación de nuestra etiqueta div para que podamos identificar el div que mostrará la carpa.

Agregar más marcas a una página

Para agregar carpas adicionales, puede configurar divs adicionales en el HTML, dando a cada uno su propio contenido de texto dentro de un intervalo; configure clases adicionales si desea diseñar las carpas de manera diferente; y agregue tantas declaraciones nuevas de mq () como tenga carpas. Asegúrese de que la llamada mqRotate () los siga para operar las carpas por nosotros.

& amp; # x203A; Informática

Dejar respuesta

Please enter your comment!
Please enter your name here

FOLLOW US

Related Stories