Question

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

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

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

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

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

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

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

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

Answer 1

这可能无法完全满足您的要求，但要看一下这是个好问题：http://jsfiddle.net/4hgd8ac1/

它使用CSS动画来动画化转换：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>

Webkit选框只在必要时滚动

1 个答案: