Как правильно использовать шатер? - PullRequest
Новая
       7

Как правильно использовать шатер?

0 голосов
/ 21 сентября 2018

Мне нужен тег <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>

1 Ответ

0 голосов
/ 21 сентября 2018

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

, поэтому, чтобы получить бесконечный эффект выделения, вы должны будетеиметь текст шириной 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 для этого, но что вы действительно хотите, так это дубликат каждый раз, когда последний касается вправо граница коробки.так что поступает непрерывный поток нового текста, независимо от того, как долго текст на самом деле.

ура

...