javascript - 从带有类的链接向上和向下滚动 ul 列表

Question

我想根据点击的按钮上下滚动新闻文章列表

如果可能的话，我想采用这种动画方式:

function smoothAdd(id, text)
{
    var el = $('#scroller' + id);

    var h = el.height();

    el.css({
        height:   h,
        overflow: 'hidden'
    });

    var ulPaddingTop = parseInt(el.css('padding-top'));
    var ulPaddingBottom = parseInt(el.css('padding-bottom'));

    el.prepend('<li>' + text + '</li>');

    var first = $('li:first', el);
    var last  = $('li:last',  el);

    var foh = first.outerHeight();

    var heightDiff = foh - last.outerHeight();

    var oldMarginTop = first.css('margin-top');

    first.css({
        marginTop: 0 - foh,
        position:  'relative',
        top:       0 - ulPaddingTop
    });

    last.css('position', 'relative');

    el.animate({ height: h + heightDiff }, 1500)

    first.animate({ top: 0 }, 250, function() {
        first.animate({ marginTop: oldMarginTop }, 1000, function() {
            last.animate({ top: ulPaddingBottom }, 250, function() {
                last.remove();

                el.css({
                    height:   'auto',
                    overflow: 'visible'
                });
            });
        });
    });
}

  $('.scrollUp').click(function() {
      smoothAdd('scrollUp', 'A new item');
  });

此处示例:http://www.fiveminuteargument.com/blog/scrolling-list

我的 HTML 看起来像这样:

  <ul id="scroller">
      <li class="current"><span>/</span><a href="#article1">News Article Title</a></li>
      <li><span>/</span><a href="#article2">News Article Title 2</a></li>
      <li><span>/</span><a href="#article3">News Article Title 3</a></li>
  </ul>
  <div class="btnWrap"><p><a href="#arrow" class="scrollUp">Scroll Up</a>
  <a href="#arrow" class="scrollDown">Scroll Up</a></p></div>

谁能指出我正确的方向？

基本上保持动画风格，但按照普通轮播将其保留为定义的 UL。

Answer 1

此处:http://jsfiddle.net/sDedY/13/

我是从头开始写的。如您所见，我直接在 css 文件中添加了 css，这比通过 jquery 添加 css 更好，尤其是对于 future 的维护/装饰等，但我没有花太多时间进行不同的计算。我猜这是一个蓝图，你可以修改它并使它变得更好，比如将顶部和底部结合起来使函数变小或类似的东西，我只是没有时间了......所以再次:重做基于 css 的计算自己修改!

编辑: 关于可变高度，您需要记住我还没有完成整个功能。编写此函数的下一步是自动计算 margin-top 和 top，而不是手动输入它们，这非常简单。所需要的只是传递一个变量来获取 li 元素的位置和尺寸，然后将它们传递给我们的代码。