用jQuery <table> </table>连续滑动的图像

Question

我正在尝试编写一个小图片，通过窗口传播图像（见图）。我在桌子里面有彩色的盒子（灰色边框），每个盒子都是一个元素。

<table id="boxes" style="border: 1px solid #666;">
  <tr>
    <td><div class="box red"></div></td>
    <td><div class="box green"></div></td>
    <td><div class="box blue"></div></td>
    <td><div class="box yellow"></div></td>
    <td><div class="box pink"></div></td>
    <td><div class="box lightblue"></div></td>
  </tr>
</table>

我想要的效果是一个无休止的从右到左的循环，这样当一个盒子的右边缘离开窗口的左边缘（黑色粗线）时，它会被附加到表格的末尾以保持去。使用jQuery很容易追加：

$('#boxes td:first').remove().appendTo('#boxes tr')

我想找出两件事： 1.如何在桌面上从右到左连续运动（jQuery.animate？） 2.如何持续监控前导框的右边缘，可能是

var tableEdge = $('#boxes').position().left;
var boxEdge = $('#boxes td:first').position().left + $('#boxes td:first').width();

if ( boxEdge < tableEdge ) { 
  $('#boxes td:first').remove().appendTo('#boxes tr');
}

感谢。

Answer 1

http://www.htmldrive.net/items/show/356/Simple-jQuery-Spy-rolling-Effect

这可能会对你有所帮助

Answer 2

我不会使用表格，因为这种设计至少有一个市长缺点。

当您移除绿色单元格时，所有其他单元格将“跳转”到左侧一个单元格。在这个例子中，蓝色的那个将落在绿色的那个。这必须由动画引擎补偿。

相反，我最好使用具有绝对定位的div等。这样，移动单元格不会影响其他单元格。使用jQuery，我认为你可以设置“左”css属性的动画，并使其移动到窗口外。将回调附加到此动画中，您就可以将其直接移动到队列的后面。