Question

我正在努力制作新闻报道。有很多jquery插件可用我尝试使用它们。但是我发现没有一个适合我的套房。

这是我的HTML -

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

这里我希望在项目自动垂直滚动时一次显示3个列表项目（一个主要类别和两个子类别）。

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

这是我正在寻找的example。（在那里的主导航栏下查看）。唯一的区别是我需要单独显示主要类别，如红色背景按钮和2个子类别。

我可以从这里的专业人士那里获得任何解决方案，如何使用Javascript？

Answer 1

我为你制作了一个简单的垂直滚动条。它远非完美，但你应该能够根据自己的需要进行构建。 http://jsfiddle.net/uyw6j/1/

的CSS：

.container {
    position: relative;
    height: 64px;
    background: gold;
    overflow: hidden;
}

#feeds {
    position: relative; /* must have position relative or absolute for it to animate */
}

jquery：

function ticker() {
    $('#feeds').animate({
        top: '-220px' //this animates the ul upwards, or you could just do 220 to animate it downwards
    }, 6000, function () {
        $(this).animate({
            top: '0' // this resets the animation to the begining position
        }, 0);
        ticker(); // this loops the ticker animation so it restarts from the beginning and keeps going
    });
}

ticker();

列表项目像新闻贴纸一样垂直滚动

1 个答案: