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

Question

Я безнадежен в Javascript. Вот что у меня есть:

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

Он прокручивается влево, но мне нужно, чтобы он повторялся относительно легко. На данный момент он просто возвращается к началу. Это может быть невозможно, как я это сделал, если нет, у кого-нибудь есть лучший метод?

Answer 1

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

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

А этот "шелковистый"

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

Answer 2

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

Answer 3

Недавно я реализовал выделение в 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>    

Answer 4

Этот скрипт используется для замены тега выделения

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

см. демо здесь

Answer 5

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

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

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

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

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

Answer 6

Работая с кодом @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 ();
});

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