javascript - jQuery:响应式垂直自动收报机

Question

我目前正在使用这个插件:http://richhollis.github.io/vticker/创建一个垂直的新闻行情。插件也很棒，效果很好，但问题很小，正如您通过我的 fiddle 演示看到的那样:http://jsfiddle.net/vzb4mv0n/3/如果 li 元素的高度大小不同，这会在每个元素之间留下很大的间隙，因为插件似乎采用了具有最大高度的 li 元素，并分配这适用于所有 li 元素，这看起来不太好，因为我希望它们彼此齐平，无论副本中有多少行，或窗口大小等。

除了我的fiddle link about外，下面还有必要的代码:
HTML

<div id="example">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
    </ul>
</div>

jQuery

$(function () {
    $('#example').vTicker('init', {
        speed: 600,
        pause: 2000
    });
});


$(document).ready(function () {
    Resize();
});

//Every resize of window
$(window).resize(function () {
    Resize();
});

//Dynamically assign height
function Resize() {
    // Handler for .ready() called.
    var windowHeight = $(window).height(),
        finalHeight = windowHeight + 'px';

    $('#example').css('height', finalHeight);

}

CSS

#example {
    position: fixed;
    top: 0;
    left: 0;
    text-align: left;
    background-color: #345c6d;
    border-radius: 5px;
}
#example li {
    font-size: 50px;
}
#example li:after {
    content:">";
    display: block;
}

如有任何建议，我们将不胜感激!

Answer 1

您必须使用 ticker 插件的以下选项来更改该行为。

$('#example').vTicker('init', {
    speed: 600,
    pause: 2000,
    showItems: 3,
    height: 200
});

showItems 和 height 就是您要查找的内容。 您可以阅读更多关于选项的信息 here .

http://jsfiddle.net/spLt312e/