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

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

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

А этот «шелковисто-гладкий»

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

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

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

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

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

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

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

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

А вот и рабочий кодовый ключ