HTML шатрам нужно дождаться завершения других перед началом прокрутки - PullRequest
Новая
       38

HTML шатрам нужно дождаться завершения других перед началом прокрутки

0 голосов
/ 16 марта 2020

У меня есть много выделенных областей на моей странице, каждая в отдельной строке, и имеют разную длину текста 

<marquee class="mq">this finishes first</marquee>
<marquee class="mq">this finishes last because it has a veryyyyyyyyyyyyyyy longggggggggggggggggggggggggggggggggg text in it</marquee>
<marquee class="mq">this finishes secondly after 1st one</marquee>

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

.mq {
  width: 600px;
  border: solid 1px black;
  display: block;
  margin: 0 auto;
}
<marquee class="mq">this finishes first</marquee>
<marquee class="mq">this finishes last because it has a veryyyyyyyyyyyyyyy longggggggggggggggggggggggggggggggggg text in it</marquee>
<marquee class="mq">this finishes secondly after 1st one</marquee>

1 Ответ

0 голосов
/ 23 марта 2020

Я сам нашел собственное решение для этого, используя css анимацию вместо использования marquee 

<div class="container">
    <div class="marquee">text 1</div>
</div>
<div class="container">
    <div class="marquee">text 2</div>
</div>
<div class="container">
    <div class="marquee">text 3</div>
</div>

.marquee {
    width: fit-content;
}

Во-первых, ширина набора классов set div - это fit-content для получения реальной ширины каждого div * 1004. *

Затем выполните al oop, чтобы найти максимальную ширину всего выделения (maxwidth)

Затем установите для всех полей div с помощью свойства width встроенного стиля максимальное значение для всех выделений

Теперь каждый div.marquee имеет ту же ширину, что и maxwidth (текущая ширина - встроенный стиль, переопределяет текущий стиль width из класса marquee)

Все div.marquee будут работать внутри своего собственного контейнера с фиксированной шириной

...