Question

我正在尝试使用Jquery在UL列表上滚动，两个跨度上下移动。它适用于一个李子，但如何动态填充ul？谢谢你，我完全失去了

 $('span.scrollDown').click(function () {
        $('.liste-grostitres li:first-child').css('margin-top', 0 - $('.liste-grostitres li').outerHeight());
        $('.liste-grostitres').css('overflow', 'hidden');
    });

    $('span.scrollUp').click(function () {
        $('.liste-grostitres li:first-child').css('margin-top', 0);
        $('.liste-grostitres').css('overflow', 'visible');
    });


<div id="grostitres">
    <div class="gInner">
    <span class="scrollUp"></span>
    <span class="scrollDown"></span>
    <div class="scrollable" id="divlist" runat="server">   
      <ul>
          <li></li>
          <li></li>
          ...
      </ul>
    </div>              
    </div>

Answer 1

将您的UL设置为position: relative;并拥有top: 0;。

添加一个处理动画的功能：

var scroll_ul = function(offset) {
    // Target the UL to scroll
    var to_scroll = $('#divlist').find('ul');

    // Store the distance to scroll (assumes LIs are all equal height)
    var scroll_distance = $('#divlist').find('li').outerHeight(true);

    // Animate
    to_scroll.stop().animate({ top: '-=' + (offset * scroll_distance) });
};

然后将您的点击处理程序更改为：

$('span.scrollDown').click(function() {
    scroll_ul(1);
});

$('span.scrollUp').click(function() {
    scroll_ul(-1);
});

如果敲击scrollDown / scrollUp按钮，您可能会遇到奇怪的滚动距离。那时你应该研究jQuery的.one()函数。

Answer 2

这是一个使用slidetoggle的小提琴： http://jsfiddle.net/RMQLM/

也是工作代码示例：

HTML：

<div id="up">up</div>
<div id="list">
<ul>
    <li>foo1</li>
    <li>bar1</li>
    <li>foo2</li>
    <li>bar2</li>
    <li>foo3</li>
    <li>bar3</li>
    <li>foo4</li>
    <li>bar4</li>
    <li>foo5</li>
</ul>
</div>
<div id="down">down</div>

CSS：

div#list {
    height: 93px;
    overflow: hidden;
    border: 1px solid red;
}

jQuery的：

var listcount = $('li').size();
var cli = 1;
$('#down').click(function() {
    if (cli < listcount) {
        $('li:nth-child(' + cli + ')').slideToggle();
        cli++;
    }
});
$('#up').click(function() {
    if (cli > 1) {
        cli--;
        $('li:nth-child(' + cli + ')').slideToggle();
    }
});

Answer 3

我认为动画整个UL而不是单个LI会更有效。您已将UL包装在DIV中，那么为什么不相对于包装器为UL设置动画？这与在UL中设置单个LI的动画方式相同，因此您无需重新发明轮子。

Jquery UL Scroll

3 个答案: