Javascript Marquee для замены тегов ‹marquee›

Вот плагин jQuery с множеством функций:

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

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

Простое решение 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://stackoverflow.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

Недавно я реализовал выделение в HTML с помощью подключаемого модуля 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>    

HTML5 не поддерживает тег, однако многие браузеры по-прежнему будут отображать текст «правильно», но ваш код не будет проверяться. Если это не проблема для вас, возможно, это вариант.

CSS3 предположительно может иметь выделенный текст, однако, поскольку любой, кто знает, как это сделать, считает, что это «плохая идея» для CSS, в Интернете я нашел очень ограниченную информацию. Даже документы W3 не содержат достаточно подробностей, чтобы любитель или самоучка мог их реализовать.

PHP и Perl также могут дублировать этот эффект. Сценарий, необходимый для этого, был бы безумно сложным и потребовал бы гораздо больше ресурсов, чем любые другие варианты. Также существует вероятность того, что сценарий будет работать слишком быстро в некоторых браузерах, что приведет к полному отсутствию эффекта.

Итак, вернемся к JavaScript. Ваш код (OP) кажется самым чистым, простым и эффективным, что я нашел. Я попробую это. Для бесшовной работы я буду искать способ ограничить пустое пространство между концом и началом, возможно, выполнив цикл while (или аналогичный) и фактически запустив два скрипта, позволяя одному отдыхать, пока другой обрабатывает.

Также может быть способ с одним изменением функции для устранения пробелов. Я новичок в JS, поэтому ничего не знаю. - Я знаю, что это неполный ответ, но иногда идеи могут привести к результатам, хотя бы для кого-то другого.

Этот скрипт используется для замены тега 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>

см. демонстрацию здесь

Работая с кодом @Stano и некоторым jQuery, я создал сценарий, который заменит старый тег marquee на стандартный div. Код также проанализирует атрибуты marquee, такие как direction, scrolldelay и scrollamount.

Вот код:

jQuery(function ($) {

    if ($('marquee').length == 0) {
        return;
    }

    $('marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_marquee() {

        let marqueeElements = document.getElementsByClassName('new-marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_marquee ();
});

А вот рабочий codepen