Javascript Marquee zastąpić <marquee> tagi

Question

Jestem beznadziejny w JavaScript. Oto, co mam:

<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> 

Przewija się w lewo, ale potrzebuję go powtórzyć stosunkowo płynnie. W tej chwili po prostu wraca na początek. Może nie jest to możliwe, tak jak ja to zrobiłem, jeśli nie, ktoś ma lepszą metodę?

Answer 1

o to plugin jQuery z wieloma funkcjami:

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

i ten jest "jedwabiście gładka"

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

Answer 2

Proste wyszukiwanie google i znaleźć dokładnie to, czego szukasz:

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

Answer 3

HTML5 nie obsługuje tagu, jednak wiele przeglądarek nadal wyświetla tekst "poprawnie", ale Twój kod nie zostanie zatwierdzony. Jeśli to nie jest problem dla Ciebie, może to być opcja.

CSS3 może nosić tekst w ramce, ale ponieważ każdy, kto wie, jak to zrobić, wierzy, że jest to "zły pomysł" na CSS, ale informacje na jego temat są bardzo ograniczone. Nawet dokumenty W3 nie są wystarczająco szczegółowe, aby hobbysta lub osoba samouka mogła je wdrożyć.

PHP i Perl mogą również powielić ten efekt. Potrzebny do tego skrypt byłby niesamowicie skomplikowany i zajmowałby znacznie więcej zasobów niż jakiekolwiek inne opcje. Istnieje również możliwość, że skrypt uruchomi się zbyt szybko w niektórych przeglądarkach, powodując całkowite zanegowanie tego efektu.

Powrót do kodu JavaScript - Twój kod (OP) wydaje się być najczystszym, najprostszym i najskuteczniejszym, jaki znalazłem. Będę próbować tego. Jeśli chodzi o element bez szwu, będę szukał sposobu na ograniczenie białej przestrzeni między końcem i początkiem, ewentualnie z wykonywaniem pętli (lub podobnej) i faktycznie uruchomienia dwóch skryptów, pozwalając na odpoczynek podczas gdy drugi przetwarza.

Może istnieć również sposób z jedną zmianą funkcji, aby wyeliminować białe znaki. Jestem nowy w JS, więc nie wiem z góry. - Wiem, że nie jest to pełna odpowiedź, ale czasami pomysły mogą powodować wyniki, choćby dla kogoś innego.

Answer 4

Proste rozwiązanie 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

Niedawno realizowane markizę w HTML przy użyciu jQuery Cycle 2 wtyczki: 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

Ten skrypt używany do zastąpienia markizę tag

<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> 

zobaczyć demo here