1

我只用几行代码做了一个超级简单的代码/滑块东西，它有点响应。

请参阅jsBin和演示中的代码（调整屏幕大小并很好地观看自动收报机调整大小。）

基本的 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跟随时如何防止“跳跃”？请参阅此演示。

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

我试图添加ticker.stopPropagation();，ticker.preventDefault();但它没有好处。

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

4

1 回答 1

1

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

因此，添加此代码（参见演示）：

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);
} );
于 2013-05-12T05:58:05.923 回答