images sliding continuously with and jQuer 2019-07-16 11:32发布 站内文章 / jQuery 11 0 0 戒情不戒烟 女 | 书童 私信 问题: 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. 回答1: http://www.htmldrive.net/items/show/356/Simple-jQuery-Spy-rolling-Effect this may help you 回答2: 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. 标签： jquery animation 举报 戒情不戒烟 女 | 书童 私信 收藏的人(0) Ta的文章 更多文章 SpringMVC入门详解及案例 关于开源对话式AI及创业公司 我写了套框架，把滑动窗口算法变成了默写题 程序员，如何才能越老越吃香？落地指南 JAVA学习第一课-------JAVA基础 JavaScript DOM idea 自定义注释模板 部署Flannel网络 登录 后发表评论 0条评论 还没有人评论过~ ×关闭 举报内容 检举类型 检举内容 检举用户 检举原因 广告推广 恶意灌水 回答内容与提问无关 抄袭答案 其他 检举说明(必填) 提交 关闭 × 打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮 标签大全 站内问题 专栏文章 站内专家 站内话题 站内公告 财富值规则 宁ICP备15000671号-9 站内文章地图xml 站内问答地图xml 站内作者地图xml 站内标签地图xml 本站部分内容来自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请联系我们，我们将及时予以处理。 邮箱：[e-mail] Copyright © 2016-2018 WHATSNSV3.8

问题:

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.

回答1:

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

this may help you

回答2:

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.