Question

我在处理项目时发现了一些很酷的代码。它的jquery影响一个html表。它基本上使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示例。

Answer 1

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

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

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

这是一个Fiddle example.

Answer 2

向上/向下滑动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;
};

<强> Updated fiddle

滑块HTML表格排列并重复

2 个答案: