幻燈片HTML表格行並重復

我在項目上工作時發現了一些很酷的代碼。它的jQuery效果html表。它基本上使得tbody向上滾動，所以位於頂部的行進入底部，其餘的行向上移動。這就是我的意思是：幻燈片HTML表格行並重復

<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的例子。

來源

2013-04-16 jkw4703

的最大問題是移動表身不動，表頭。我一直在環顧四周，我可以找到一個方法如何做到這一點。如果我可以移動tbody而不移動thead，它將很容易滑動tbody – orb

事實上，我一直無法向tbody應用任何位置樣式。他們什麼都不做。 – orb

滑動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

來源

2013-04-17 01:28:00

謝謝。我更喜歡這個。另外它更多的是我想要的 – jkw4703

我不確定你在上面添加的插件，但這裏有另一種快速解決方法，就像你所描述的那樣，在我看來這有點簡單。周圍可能有更好的方法。

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

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

這裏是一個Fiddle example.

來源

2013-04-16 23:14:42 dev

幻燈片HTML表格行並重復

回答

相關問題