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

Я безнадежен в 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>

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

Ответы

Ответ 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>

Ответ 3

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

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

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

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

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

Ответ 4

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

Ответ 5

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

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