Javascript Marquee para reemplazar <marquee> etiquetas

Question

No tengo remedio en Javascript. Esto es lo que tengo:

<script type="text/javascript"> 
    function beginrefresh(){ 

     //set the id of the target object 
     var marquee = document.getElementById("marquee_text"); 

     if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) { 
      marquee.scrollLeft = 0; 
     } 

     marquee.scrollLeft += 1; 

     // set the delay (ms), bigger delay, slower movement 
     setTimeout("beginrefresh()", 10); 

    } 
</script> 

Se desplaza hacia la izquierda pero necesito que se repita de forma relativamente uniforme. Por el momento, simplemente salta al principio. Puede que no sea posible de la forma en que lo hice, si no, ¿alguien tiene un método mejor?

Answer 1

Aquí es un plugin de jQuery con un montón de características:

http://jscroller2.markusbordihn.de/example/image-scroller-windiv/

y éste es "sedoso suave"

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Answer 2

Una simple búsqueda en Google y encontrar exactamente lo que busca:

http://javascript.about.com/library/bltick2.htm

Answer 3

HTML5 no es compatible con la etiqueta, sin embargo, muchos navegadores mostrarán el texto "correctamente" pero su código no se validará. Si esto no es un problema para usted, esa puede ser una opción.

CSS3 tiene la capacidad, supuestamente, de tener texto de marquesina, sin embargo, porque cualquiera que sepa cómo hacerlo cree que es una "mala idea" para CSS, hay información muy limitada que he encontrado en línea. Incluso los documentos W3 no entran en suficiente detalle para que el aficionado o la persona autodidacta lo implemente.

PHP y Perl también pueden duplicar el efecto. El script necesario para esto sería terriblemente complicado y tomaría muchos más recursos que cualquier otra opción. También existe la posibilidad de que la secuencia de comandos se ejecute demasiado rápido en algunos navegadores, lo que hace que el efecto sea completamente negado.

Volviendo a JavaScript - Su código (OP) parece ser el más limpio, simple y efectivo que he encontrado. Voy a estar probando esto. Para el caso perfecto, buscaré la manera de limitar el espacio en blanco entre el final y el principio, posiblemente haciendo un ciclo while (o similar) y ejecutar dos de los guiones, dejando descansar uno mientras el otro está procesando.

También puede haber una manera con un solo cambio de función para eliminar el espacio en blanco. Soy nuevo en JS, así que no lo sepas. - Sé que esta no es una respuesta completa, pero a veces las ideas pueden causar resultados, aunque solo sea para otra persona.

Answer 4

solución simple javascript:

window.addEventListener('load', function() { 
 
\t function go() { 
 
\t \t i = i < width ? i + step : 1; 
 
\t \t m.style.marginLeft = -i + 'px'; 
 
\t } 
 
\t var i = 0, 
 
\t \t step = 3, 
 
\t \t space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'; 
 
\t var m = document.getElementById('marquee'); 
 
\t var t = m.innerHTML; //text 
 
\t m.innerHTML = t + space; 
 
\t m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789 
 
\t var width = (m.clientWidth + 1); 
 
\t m.style.position = ''; 
 
\t m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space; 
 
\t m.addEventListener('mouseenter', function() { 
 
\t \t step = 0; 
 
\t }, true); 
 
\t m.addEventListener('mouseleave', function() { 
 
\t \t step = 3; 
 
\t }, true); 
 
\t var x = setInterval(go, 50); 
 
}, true);

#marquee { 
 
    background:#eee; 
 
    overflow:hidden; 
 
    white-space: nowrap; 
 
}

<div id="marquee"> 
 
\t 1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a> 
 
</div>

JSFiddle

Answer 5

que implementó recientemente una carpa en HTML usando el Ciclo 2 plugin de jQuery: http://jquery.malsup.com/cycle2/demo/non-image.php

<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-speed="9000" data-cycle-timeout="1" data-cycle-easing="linear" data-cycle-pause-on-hover="true" data-cycle-slides="> div" > 
    <div> Text 1 </div> 
    <div> Text 2 </div> 
</div>  

Answer 6

Este script se utiliza para sustituir la etiqueta de marquesina

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 

     $('.scrollingtext').bind('marquee', function() { 
      var ob = $(this); 
      var tw = ob.width(); 
      var ww = ob.parent().width(); 
      ob.css({ right: -tw }); 
      ob.animate({ right: ww }, 20000, 'linear', function() { 
       ob.trigger('marquee'); 
      }); 
     }).trigger('marquee'); 

    }); 
    </script> 


<div class="scroll"> 
    <div class="scrollingtext"> Flash message without marquee tag using javascript! </div> 
</div> 

ver demo here