javascript - podemos - para que sirve la etiqueta scrolldelay

JavaScript Marquee para reemplazar las etiquetas<marquee>

Question

Estoy desesperado 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 fluida. 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

Una simple búsqueda en Google y encontrará exactamente lo que está buscando:

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

Answer 2

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, debido a que 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, provocando que el efecto sea completamente negado.

Así que de vuelta 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 3

Aquí hay un plugin de jQuery con muchas características:

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

Y este es "suave como la seda"

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

Answer 4

Recientemente implementé una marquesina en HTML usando el complemento Cycle 2 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 5

Este script se usó para reemplazar 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 la demostración aquí

Answer 6

Solución simple de javascript:

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

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

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

JSFiddle