jquery - 如何设置包装 div 的高度以防止内容在响应式 slider /自动收报机后跳转？

Question

我只用了几行代码就制作了一个 super 简单的自动收报机/ slider ，而且它有点响应。

参见 the code at jsBin和 the Demo (调整屏幕大小并观察自动收报机调整大小。)

基本的 HTML 结构是:

<div id="tickerwrap">
    <ul id="ticker">
        <li>Item 1</li>
        <li>Item 2</li>
        etc.
    </ul>
</div>
<div>Another div content</div> 

jQuery 只是:

function ticker () {
    $('#ticker li:first').slideUp (function () {
        $ (this).appendTo ($ ('#ticker')).slideDown ();
    });
}

setInterval (function (){ ticker (); }, 2500);

我的问题是计算包装器 div 的高度 (#tickerwrap)...

1. 如何防止后面跟着另一个div时“跳转”？参见 this demo .

2. 添加到DOM时如何计算或设置div的高度？

我尝试添加 ticker.stopPropagation(); 和 ticker.preventDefault(); 但效果不佳。

我也希望高度/位置能够响应。

Answer 1

如果不假设代码项的数量或高度(除非我们假设有超过 2 个)，您几乎需要使用 javascript 来设置 #tickerwrap 的大小。要使其响应窗口大小调整，请使用带有时间延迟的 jQuery 的 .resize()。

因此，添加此代码 ( See the demo ):

function sizeTickerwrap () {
    var tickerUL        = $('#ticker');
    var numTickerItems  = tickerUL.children ('li').length;
    if (numTickerItems  < 3)
        return;

    //-- The second item will not be in a slide animation.
    var itemHeight      = tickerUL.children ('li:eq(1)').outerHeight (true);
    //-- Adjust for the containing <ul>
    var wrapHeightAdjst = tickerUL.outerHeight (true) - tickerUL.height ();

    $("#tickerwrap").height (numTickerItems * itemHeight + wrapHeightAdjst);
}

//-- Initial call after a settling delay
setTimeout (sizeTickerwrap, 1200);

$(window).resize ( function () {
    /*-- Time-delay the resize response to give browser a chance to settle
        and avoid bogging down the UI.
    */
    this.resizeTimer    = this.resizeTimer || null;
    if (this.resizeTimer)
        clearTimeout (this.resizeTimer);

    this.resizeTimer    = setTimeout (sizeTickerwrap, 200);
} );