我正在尝试编写一个小测试页面,通过窗口循环图像(参见图片)。我在表格内有彩色框(灰色边框),每个框都是一个元素。
<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');
}
thanks.