Question

我正在尝试完成一些类似于新闻自动收报机功能的不同内容。在我问这个之前，我尝试使用不同的不同新闻自动收报机jquery插件。但仍然没有运气。

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

<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>

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

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

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

所以任何人都可以告诉我如何使用javascript完成此操作，或者我知道是否有任何jquery插件来执行此操作。

更新： 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;
            }
        }
    }

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

任何想法都会非常感激。谢谢。

Answer 1

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

它使用了一种不同的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>

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

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

Answer 2

我从来没有理解为什么人们喜欢使用插件这么多，它只是占用了大量空间（大小虎钳）！

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

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

以及你的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);

动画中的marginTop应该是你的高度的负值。（在这个例子中它是-110px）

这是演示：

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

在新闻贴纸中显示项目

2 个答案: