在新闻贴纸中显示项目

I am trying to accomplish some different thing which is something similar to the feature of news ticker. Before I ask this I tried to get it work using different different news ticker jquery plugins. But still no Luck.

我正在尝试完成一些与新闻自动收录器功能相似的东西。在我问这个之前,我尝试使用不同的不同新闻自动收报机jquery插件。但仍然没有运气。

This is markup I am using and let me to explain my requirement through it.

这是我正在使用的标记,让我通过它来解释我的要求。

<div class="container">
    <ul class="feeds" id="feeds">
        <li class="category">category 01</li>
        <li class="category-item">Sub category 01</li>
        <li class="category-item">Sub category 02</li>
        <li class="category-item">Sub category 03</li>
        <li class="category-item">Sub category 04</li>                        
        <li class="category">category 02</li>
        <li class="category-item">Sub category 01</li>
        <li class="category-item">Sub category 02</li>
        <li class="category-item">Sub category 03</li>
        <li class="category-item">Sub category 04</li>
    </ul>
</div>

I need to display these list item like a news stick in a horizontal bar. How I need to display it is one category item with following two subcategory items in a row. If particular category have more than two subcategory then I need to display next two subcategory items and like wise. When displaying subcategory secondly the main category name should be still display in the row.

我需要在水平栏中显示这些列表项,如新闻栏。我需要如何显示它是一个类别项目连续两个子类别项目。如果特定类别有两个以上的子类别,那么我需要显示下两个子类别项目并且明智。其次显示子类别时,主类别名称仍应显示在行中。

Finally I tried with Jquery Advance News Ticker plugin. It was close but not 100%

最后,我尝试使用Jquery Advance News Ticker插件。它很接近,但不是100%

$('#feeds').newsTicker({
    row_height: 40,
    max_rows: 1,
    duration: 3000,
    pauseOnHover: 0
});

So anybody can tell me how to accomplish this with javascript or can I know is there any jquery pluging to do this.

所以任何人都可以告诉我如何用javascript完成这个或者我知道是否有任何jquery插入这样做。

UPDATE : CSS -

更新:CSS -

> .container {
        background: #1e1e1e;
        height: 40px;

        .feeds {
            list-style: none;
            float: left;
            margin: 0;
            padding: 0;
            display: table;

            > li {
                display: inline-block;
                color: #FFFFFF;
                display: inline-block;
                padding-right: 50px;
                //display: table-cell;
                vertical-align: middle;
                padding-top: 5px;
            }

            > li.category {
                background: #a11041;
                margin: 7px 30px 0;
                padding: 3px 10px;
            }
        }
    }

Hope somebody will help me out regarding this.

希望有人会帮我解决这个问题。

Any idea would be greatly appreciated. Thank you.

任何想法将不胜感激。谢谢。

2 个解决方案

#1

I can't find an existing solution for what you want, but if you are planning on writing your own solution this may help.

我无法找到您想要的现有解决方案,但如果您计划编写自己的解决方案,这可能有所帮助。

It uses a somewhat different HTML structure, but I think this is what you're trying to achieve.

它使用了一些不同的HTML结构,但我认为这是你想要实现的。

HTML:

<div id="feed">
    <ul>
        <li>
            Category 1
            <ul>
                <li>Subcategory 1</li>
                <li>Subcategory 2</li>
                <li>Subcategory 3</li>
            </ul>
        </li>
        <li>
            Category 2
            <ul>
                <li>Subcategory 1</li>
                <li>Subcategory 2</li>
                <li>Subcategory 3</li>
                <li>Subcategory 4</li>
                <li>Subcategory 5</li>
                <li>Subcategory 6</li>
                <li>Subcategory 7</li>
                <li>Subcategory 8</li>
            </ul>
        </li>
    </ul>
</div>

With CSS you make sure that the viewport (#feed) only shows one category name and two subcategories. Then, with JavaScript, you allow the user to go to the next two subcategories by changing the top or margin-top of the sub-ul-element. If the user reached the bottom of subcategories, it goes to the next category. If the user reached the last category, it goes to the first category again.

使用CSS,您可以确保视口(#feed)仅显示一个类别名称和两个子类别。然后,使用JavaScript,您允许用户通过更改sub-ul-element的top或margin-top来转到下两个子类别。如果用户到达子类别的底部,则转到下一个类别。如果用户到达最后一个类别,它将再次转到第一个类别。

Working example: http://jsfiddle.net/Ln73X/1/

工作示例:http://jsfiddle.net/Ln73X/1/

#2

I never get why people like to use plugins so much, it just uses a lot of space (size vise)!

我从来没有理解为什么人们喜欢使用插件这么多,它只是占用了大量的空间(大小的虎钳)!

anyways I had to do this a while ago, I didn't use a plugin, just pure css and jQuery. this example provides an always animating news sticker. if you want an example like the one you provided you can easily implement it, or if it is too difficult for you let me know and I'll provide you one.

无论如何我不得不这样做,我没有使用插件,只是纯粹的CSS和jQuery。这个例子提供了一个总是动画的新闻贴纸。如果你想要一个像你提供的那样的例子,你可以很容易地实现它,或者如果它太难让你告诉我,我会给你一个。

first you have to set the overflow of the container to hidden in css and then put the ul inside another div (let's call it #box).

首先,你必须将容器的溢出设置为隐藏在css中,然后将ul放在另一个div中(让我们称之为#box)。

and as for your jQuery:

至于你的jQuery:

$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
    $('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
    },5000);
setInterval(function(){
    $('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
    setTimeout(function(){
        $('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
        },5000);
    },5020);

the marginTop in the animation should be the negative of the height of your li. (in this example it is -110px)

动画中的marginTop应该是你的高度的负数。 (在这个例子中它是-110px)

here is the demo:

这是演示:

http://codepen.io/anon/pen/ClzLy

#1