Javascript Marquee để thay thế <marquee> thẻ

Question

Tôi vô vọng với Javascript. Đây là những gì tôi có:

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

Nó cuộn sang trái nhưng tôi cần nó lặp lại tương đối liền mạch. Tại thời điểm nó chỉ nhảy trở lại đầu. Nó có thể là không thể theo cách tôi đã làm nó, nếu không, bất cứ ai có một phương pháp tốt hơn?

Answer 1

Đây là một plugin jQuery với rất nhiều tính năng:

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

Và là một trong những này "mượt mà"

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

Answer 2

Một tìm kiếm google đơn giản và bạn tìm thấy chính xác những gì bạn đang tìm kiếm:

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

Answer 3

HTML5 không hỗ trợ thẻ, tuy nhiên rất nhiều trình duyệt sẽ vẫn hiển thị văn bản "đúng" nhưng mã của bạn sẽ không xác thực. Nếu đây không phải là vấn đề với bạn, đó có thể là một lựa chọn.

CSS3 có khả năng, được cho là có văn bản marquee, tuy nhiên vì bất kỳ ai biết cách làm điều đó tin rằng đó là một "ý tưởng tồi" đối với CSS, có rất ít thông tin tôi tìm thấy trực tuyến. Ngay cả các tài liệu W3 cũng không đi vào chi tiết đủ để người có sở thích hoặc người tự học thực hiện nó.

PHP và Perl cũng có thể sao chép hiệu ứng. Kịch bản cần thiết cho việc này sẽ phức tạp và mất nhiều tài nguyên hơn bất kỳ tùy chọn nào khác. Cũng có khả năng là tập lệnh sẽ chạy quá nhanh trên một số trình duyệt, khiến hiệu ứng bị phủ nhận hoàn toàn.

Vì vậy, hãy quay lại JavaScript - Mã của bạn (OP) có vẻ là đơn giản nhất, đơn giản nhất, hiệu quả nhất mà tôi đã tìm thấy. Tôi sẽ cố gắng này. Đối với điều liền mạch, tôi sẽ xem xét một cách để giới hạn khoảng trắng giữa đầu và đầu, có thể với một vòng lặp while (hoặc tương tự) và thực sự chạy hai tập lệnh, cho phép một phần còn lại trong khi phần còn lại đang xử lý.

Cũng có thể có cách thay đổi chức năng duy nhất để loại bỏ khoảng trắng. Tôi mới làm quen với JS, vì vậy, tôi không biết đầu của tôi. - Tôi biết đây không phải là câu trả lời đầy đủ, nhưng đôi khi ý tưởng có thể gây ra kết quả, nếu chỉ cho người khác.

Answer 4

Simple giải pháp 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

Gần đây tôi đã thực hiện một vùng trong HTML sử dụng Chu kỳ 2 jquery plugin: 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

Kịch bản này sử dụng để thay thế các thẻ marquee

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

thấy demo here