Question

我想拥有一个永无止境的滚动字幕，并且这意味着字幕中永远不会有空白。

因此，例如，当所有文本都位于屏幕（视口）中并且最新的单词都经过字幕处理时，字幕将重复执行而无需先结束字幕（意思是：所有文本都已移至左侧[字幕：右->左]）。重复一遍，我的意思是文本将直接从字幕所在的位置开始

因此，当我输入字幕文本“地球的你好人•”时，就在这里：

_ =空白
！ =跑马灯
^ =跑马灯的第二个字符
＆=跑马灯的第三个字符

________ !!!!!!!!!!!!!!!!!!!!!!!!! ****************** ********** ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ &&&&&&&&&

当然，我需要它保持平滑。类似于this的答案，但没有空格。库的使用无关紧要。

有人可以帮助我吗？

Answer 1

您可以使用marque plugin来实现

$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 5000,
    //gap in pixels between the tickers
    gap: 0,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: false
});

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
  
<body>
  <div class="marquee">stuff to say 1|</div>
    <div class="marquee">stuff to say 2|</div>
    <div class="marquee">stuff to say 3|</div>
    <div class="marquee">stuff to say 4|</div>
  <div class="marquee">stuff to say 5</div>
</body>

带重复文字的滚动字幕

1 个答案: