Esta JavaScript El código moverá una sola cadena de texto que contiene cualquier texto que elija a través de un espacio de marquesina horizontal sin interrupciones. Para ello, agrega una copia de la cadena de texto al comienzo del desplazamiento tan pronto como desaparece del final del espacio de la marquesina. El script calcula automáticamente cuántas copias del contenido necesita crear para garantizar que nunca se quede sin el texto en su marquesina.
Esto 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 marquesina continua en su página o repetir esas declaraciones para agregar aún más carpas. La función mqRotate debe llamarse pasando mqr después de que se definan las carpas, ya que manejará las rotaciones.
// Marquesina de texto continuo
// copyright 30 de septiembre de 2009 de Stephen Chapman
// http://javascript.about.com
// se otorga permiso para usar este Javascript en su página web
// siempre que todo el código a continuación en este script (incluidos estos
// comentarios) se utiliza sin ninguna modificación
función objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) devuelve obj.clip.width; devuelve 0;} var mqr = []; función
mq (id) {this.mqo = document.getElementById (id); var wid =
objWidth (this.mqo.getElementsByTagName ('span') [0]) + 5; var fulwid =
objWidth (this.mqo); var txt =
this.mqo.getElementsByTagName ('span') [0] .innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; para (var i = 0; i <
maxw; i ++) {this.mqo.ary [i] = document.createElement ('div');
this.mqo.ary [i] .innerHTML = txt; this.mqo.ary [i] .style.position =
'absoluto'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
heit this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
función mqRotate (mqr) {if (! mqr) return; para (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; para (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}
El contenido de texto real de la marquesina va dentro del div en una etiqueta span. El ancho de la etiqueta de extensión es lo que se usará como el ancho de cada iteración del contenido en la marquesina (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 cargar la página contenga los valores correctos.
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 nuevas declaraciones mq () como marquesinas. Asegúrese de que la llamada mqRotate () los siga para operar las carpas por nosotros.