JavaScript Marquee для замены тегов

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

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

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

11
html javascript marquee

5 ответов

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

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

и "шелковистой"

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

16

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

6

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

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

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

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

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

1

недавно я реализовал шатер в 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>
1

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

посмотреть демо здесь

1