获取一个选框，以便在空间可用时立即开始重复 [英] Get a marquee to begin repeating as soon as space is available

问题描述

这里是我迄今为止的笔。我一直在使用CSS3，但我可以使用其他方法，如果它将更好地工作：

Here is a pen for what I have so far. I've been using CSS3 however I'm open to using other methods if it will work better:

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

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

我希望选框开始重复， p的末端已滑入框架。

I'd like the marquee to begin repeating itself the moment that as the end of the p has slid into frame. I also need the marque to stop with a mousover and be scrollable (this part works already).

我发现这个例子实现了我想实现的目标。我注意到他们是这样做通过复制的内容，但我一直无法让它正常工作。我也想知道这是否是实现我的目标的最佳方式，也许最好使用JavaScript或一些jquery插件？

I found this example that accomplishes what I want to achieve. I noticed that they are doing so by duplicating the content, however I've been unable to get this to work correctly. I also wonder if this is the best way to achieve my goal, maybe it would be better to use javascript or some jquery plugin? I want to make sure that it works and looks the same on all browsers (within reason)

推荐答案

我已经更新了你最初的版本链接示例与您的类型标题：
http://codepen.io/anon/pen / oxEPeZ

I've updated your originally linked example fiddle with your 'genres' heading: http://codepen.io/anon/pen/oxEPeZ

我注意到的是，你提供的标记有点错误，所以原来这是发生了什么：

What I've noticed is that your markup you provided is a bit wrong, so going on the original this is what's happening:

标题块应该在它自己单独的div。我已经设置我的版本的标题浮动到选框div的左边。

The title block should be in it's own separate div. I've set my version of your title to float to the left of the marquee div.

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

Then, the marquee div needs to be wide enough to contain all the text- I set it to 500px so the items don't start stacking when they reach the maximum width of the container.

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

After that, you need to make sure you have two spans with your content. In your link you were working on, you only had one paragraph tag for each list of items. That's the main reason why it wasn't repeating.

现在，我们只为Genre节的标记如下：

So now, our markup for just the Genre section looks like this:

<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和重复它为最喜爱的艺术家.. ..（这可以被命名什么的，但我在这里所做的是用保证金底创建的每个项目下面的空间，而不是< BR> 标记）。
，因为我们的第二个股票有更多的内容，我已经添加了所谓的'捉襟见肘'给字幕更宽另一个类。

I've put the marquee and title into a container div and duplicated it for the favourite artists.... (this can be named whatever, but what I have done here is used margin-bottom to create the space below each item, instead of <br> tags). Because our second ticker has more content, I've added another class called 'stretched' to give the marquee more width.

我知道我有没有直接编辑您的提琴遗憾，但希望这有助于让你摆脱困境。

I know I haven't directly edited your fiddle sorry, however hopefully this helps get you out of trouble.

这篇关于获取一个选框，以便在空间可用时立即开始重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！