图像以＆lt不断滑动;表＆gt;和jQuery [英] images sliding continuously with <table> and jQuery

问题描述

我想写通过窗口循环图像的小测试页（见图片）。我已经彩色框的表（灰色边框）内，每个盒子是一个元素。

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>

我要去为效果是环形从右到左循环，例如，当一个盒的右边缘离开窗口的左边缘（黑粗线），则然后附加到表的末端，以保持去。所附很容易与jQuery的：

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

我想弄清楚两件事情：
1.如何有连续运动从右到左的表（jQuery.animate？）
2.如何持续监控主导框的右边缘，可能与

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');
}

感谢。

推荐答案

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

这可能会帮助你。

这篇关于图像以＆lt不断滑动;表＆gt;和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！