使用和jQuery连续滑动的图像

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

我想要的效果是一个无休止的从右到左的循环，这样当一个盒子的右边缘离开窗口的左边缘（黑色粗线）时，它会被附加到表格的末尾以继续。 使用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'); } 

谢谢。

盒子http://sofzh.miximages.com/jquery/30dgztf.png

Answer 1

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

这可能对你有帮助

Answer 2

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

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

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