Question

Here是我迄今为止所用的笔。我一直在使用CSS3，但如果它能更好用，我可以使用其他方法：

.userAttributes > .attributeGroup > .favoriteArtistsAttr {
  max-width: 74%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%   { text-indent: 0; }
  100% { text-indent: -100%; }
}

我喜欢大帐篷在p结束时滑入框架的那一刻开始重复。我还需要用一个mousover停止并且可以滚动（这个部分已经工作）。

我找到了this示例来完成我想要实现的目标。我注意到他们是通过复制内容来实现的，但是我无法让它正常工作。我也想知道这是否是实现我的目标的最佳方式，也许最好使用javascript或一些jquery插件？我想确保它在所有浏览器上都能正常工作（在合理范围内）

Answer 1

我已经更新了您最初关联的示例，以及您的＆＃39;流派＆＃39;标题： http://codepen.io/anon/pen/oxEPeZ

我所注意到的是你提供的标记有点不对，所以继续原文这是正在发生的事情：

标题栏应该在其自己的单独div中。我已将我的标题版本设置为浮动到选框div的左侧。

然后，选框div需要足够宽以包含所有文本 - 我将其设置为500px，这样当项目达到容器的最大宽度时，它们就不会开始堆叠。

之后，您需要确保两个跨越您的内容。在您正在处理的链接中，每个项目列表只有一个段落标记。 这是它不重复的主要原因。

所以现在，我们仅对类型部分的标记看起来像这样：

<div class="title">
    Genres:
</div>

<div class="marquee">
  <div>
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
  </div>
</div>

我已将选框和标题放入容器div并将其复制到最喜欢的艺术家....（这可以命名为什么，但我在这里做的是使用margin-bottom来创建空间在每个项目下方，而不是<br>标签）。因为我们的第二个自动收录器有更多内容，所以我添加了另一个名为“拉伸”的类。为了更大的宽度。

我知道我没有直接编辑你的小提琴对不起，但希望这有助于你摆脱困境。

一旦空间可用，立即开始重复

1 个答案: