5

我有一个关于 webkit marquee 的问题。我有 2 个可变宽度的元素。（两个元素的宽度相同），并且两个元素都需要是选取框。

但是，当内容溢出（大于元素）时，我需要一个选取框，如果不是，则文本应保持原样（无滚动）。

我创建了一个 JSFiddle 作为示例： http://jsfiddle.net/Vxwed/：

long 和 short 都需要通过 CSS3 进行选取，而 long 应该滚动，而 short 则不需要。

<p class="long">Hi my name is John Doe</p>
<p class="short">Yeah!</p>

请记住，元素的内容是可变的（用 javascript 填充），所以我不能对元素 marquee-behaviour 进行实际的硬编码。

这里有任何 CSS 专家可以帮助我吗？我一直在研究这个很多，但是关于这个主题的信息很少，因为它相对较新。

我现在能想到的唯一解决方案是使用 jQuery 来测量元素的宽度，然后计算它们是否需要额外的间距。如果他们需要应用选框，否则不需要。但这对我来说似乎不是很干净，我宁愿只在可能的情况下在 HTML/CSS 中执行此操作。

4

1 回答 1

1

这可能不完全符合您的要求，但这是一个很好的问题：http: //jsfiddle.net/4hgd8ac1/

它使用 CSS 动画来为 transform: translateX 百分比设置动画，因为这是基于元素本身的宽度。这意味着我们可以向左滚动一个全宽的元素。然后给选框一个最小宽度，我们可以标准化较短的文本长度。然后我们使用 calc(100% + 100px) 将项目向左移动 100%，除了轮播的宽度 (100px)。

它没有完全滚动文本的传统选取框感觉，但使用动画关键帧可以在文本末尾暂停，让用户有时间阅读。

p {
  height: 30px;
  width: 100px;
  background-color: #CCC;
  white-space: nowrap;
}

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee__content {
  padding: 5px 0;
  margin-right: 100px;
  position: absolute;
  height: 20px;
  animation: scroller 3s linear infinite;
  min-width: 100px; /* This needs to match the width of the parent */
}

@keyframes scroller {
 0% {
     transform: translateX(0%);
 }

 /* ‘pauses’ the scroller at the start for 20% of the time, adjust to edit timing */
 20% {
   transform: translateX(0%);
 }

  /* ‘pauses’ the scroller at the end for 20% of the time */
  80% {
    /* Translate will use the width of the element so 100% scrolls it’s full length. add the width of the marquee to stop smaller items scrolling */
   transform: translateX(calc(-100% + 100px)); 
  }

  100% {
   transform: translateX(calc(-100% + 100px));
  }
}


<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>
<p class="marquee"><span class="marquee__content">Yeah!</span></p>
于 2018-11-09T16:22:03.137 回答