javascript - 如何正确使用跑马灯？

Question

我需要标签<a>进入要复制的 DIV 命名框，以在所有行选框上显示文本，没有剪切，我是新来的，所以如果您需要更多信息，请发表评论，我会立即更新，谢谢。

$('.box').marquee({
  duration: 20000,
  gap: 0,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});

.box {
  margin: auto;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.box1 {
  margin-top: 14px;
  position: relative;
}

.box1 li {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box">
  <ul class="box1">
    <li>
      <a>TEXT MARQUEE</a>
      <a>TEXT MARQUEE</a>
    </li>
  </ul>
</div>

Answer 1

好的，我知道问题出在哪里了，当当前滚动文本触及框的左边框时，里面的内容会重复。

因此，要获得无缝的无限选取框效果，您的文本必须占屏幕宽度的 100%……这很难实现。

如果你限制它可以工作的框的宽度，请参见示例:

$('.box').marquee({
  duration: 4000,
  gap: 20,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});

$('.box2').marquee({
  duration: 4000,
  gap: 20,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});

.box {
  margin: auto;
  width: 300px;
  font-size: 20px;
  line-height:1.2;
  height: 1.2em;
  overflow: hidden;
  margin-bottom: 1em;
}
.box--1 {
  background: rgba(255,0,0,.2);
}
.box--2 {
  background: rgba(255,0,0,.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box box--1">
  <a>TEXT MARQUEE</a>
</div>

<div class="box box--2">
  <a>the longer the text gets the better this endless scrolling works</a>
</div>

我不知道是否有更好的 js 解决方案，但您真正想要的是每次最后一个触摸框的右边界时复制。这样就会有源源不断的新文本流进来，不管文本有多长。

干杯