Маркер Javascript для замены <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-шелковистая-гладкая бегущая строка /

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

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

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

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

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

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

Answer 5

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

<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 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 ();
});

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