images sliding continuously with and jQuer

2019-07-16 11:28发布

站内问答 / jQuery
1493 2 4

I'm trying to write a little test page that circulates images through a window (see image). I have colored boxes inside a table (gray border), with each box being a element. 

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

The effect I'm going for is an endless right-to-left loop, such that when an box's right edge leaves the window's left edge (black bold line), it is then appended to the end of the table to keep going. The appending is easy with jQuery:

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

I'm trying to figure out 2 things: 1. how to have continuous motion right-to-left on the table (jQuery.animate?) 2. how to constantly monitor the right edge of the leading box, possibly with

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.

boxes

2条回答
虎瘦雄心在
3楼-- · 2019-07-16 11:47

I would not use tables, since there is at least one mayor drawback with this design.

When you remove the green cell, all other cells will "jump" to the left one cell. In the example, the blue one would land where the green one was. This would have to be compensated for by your animation engine.

Instead, I would preferably use divs or such with absolute positioning. This way, moving a cell will not affect the other cells. With jQuery I think you can animate the "left" css attribute, and make it move to just outside the window. Attach a callback to this animation and you're all set to just move it right to the back of the queue.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)
向帮助了您的知道网友说句感谢的话吧!