1

我在做一个项目时发现了一些很酷的代码。它影响 html 表的 jquery。它基本上使 tbody 向上滚动，因此顶部的行向下移动，其余行向上移动。这就是我的意思：

<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

变成：

<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

第 1a 行移至底部。这是我正在使用的 jquery 代码：

<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
    var self=this,kids=self.children()
    kids.slice(20).hide()
    setInterval(function(){
        kids.filter(':hidden').eq(0).fadeIn()
        kids.eq(0).fadeOut(function(){
            $(this).appendTo(self)
            kids=self.children()
        })
    },5000)
    return this
}
$(function(){
    $('tbody').infiniteScrollUp()
})
</script>

这工作正常。没问题。但是，当我试图让它向上滑动时，就像某种卷轴一样，它要么 1）停止将其添加到底部，2）停止将它们从顶部移除，要么 3）什么都没有。如何更改此效果以向上滑动？

这是jsfiddle示例。

4

2 回答 2

1

我不确定您在上面添加的插件，但这是另一种快速解决方法，如您所描述的那样工作，在我看来更简单一些。可能有更好的方法来解决它。

function moveRows(){
   firstTR = $('tbody tr').first();
    firstTR.animate({opacity:0},
      function(){$('tbody').append(firstTR);});
    firstTR.animate({opacity:1});
}

setInterval(function(){
    moveRows();
},1000);

这是一个小提琴的例子。

于 2013-04-16T23:14:42.500 回答
1

向上/向下滑动 tr 元素很棘手。它们的行为不像块元素。

这是我能做到的最好的：

$.fn.infiniteScrollUp = function() {
    var self = this;
    var kids = self.children();
    kids.children('td, th').wrapInner('<div class="dummy"/>')
    setInterval(function() {
        var first = kids.eq(0),
            clone = first.clone().appendTo(self);
        first.find(".dummy").slideUp(1000, function() {
            kids = kids.not(first).add(clone);
            first.remove();
        });
    }, 2000);
    return this;
};

更新的小提琴

于 2013-04-17T01:28:00.730 回答