时间戳

首页 > 解决方案 > HTML选取框需要等待其他完成才能开始滚动

html - HTML选取框需要等待其他完成才能开始滚动

问题描述

我的页面中有很多选框，每一个都在单独的行中，并且有不同的文本长度

<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>

当任何选取框由于短文本而滚动完成时，它会在完成后立即重新运行。但我的要求是让它等待其他选框完成他们的并同时开始下一个循环我该如何实现这个？

.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>

标签： htmlmarquee

解决方案

我自己通过使用 css 动画而不是使用选取框找到了自己的解决方案

<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;
}

首先，class marquee set div's width is fit-content 以获得每个div的真实宽度

然后运行一个循环找到所有选框的最大宽度（maxwidth）

然后使用内联样式设置所有选框 div 宽度属性是所有选框的最大值

现在每个 div.marquee 都有相同的宽度是 maxwidth （当前宽度是内联样式，从 marquee 类覆盖当前宽度样式）

所有 div.marquee 都将在它们自己的容器中以固定宽度运行

推荐阅读