如何正确使用跑马灯?

How to use marquee correctly?

我需要将标签 <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>

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

因此,要获得无缝的无限选取框效果,您的文本必须占屏幕宽度的 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 解决方案,但你真正想要的是每次最后一个触摸框的 right 边框时重复。这样就会有源源不断的新文本进来,不管文本有多长。

干杯