images coulissant en continu avec <table> et jQuery

Question

J'essaie d'écrire une petite page de test qui circule des images à travers une fenêtre (voir image). J'ai des boîtes colorées à l'intérieur d'une table (bordure grise), chaque boîte étant un élément.

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

L'effet que je vais pour est une boucle sans fin de droite à gauche, de sorte que lorsque le bord droit quitte le bord gauche de la fenêtre d'une boîte (ligne noire en gras), il est ensuite ajouté à la fin de la table pour continuer. Le appending est facile avec jQuery:

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

J'essaie de comprendre 2 choses: 1. comment avoir un mouvement continu de droite à gauche sur la table 2. Comment (jQuery.animate?) pour surveiller constamment le bord droit de la boîte de tête, éventuellement avec

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

merci.

boxes http://i34.tinypic.com/30dgztf.png

Answer 1

Je ne voudrais pas utiliser des tableaux, car il y a au moins un inconvénient de maire avec cette conception. Lorsque vous supprimez la cellule verte, toutes les autres cellules "sautent" vers la cellule gauche. Dans l'exemple, le bleu atterrirait là où était le vert. Cela devrait être compensé par votre moteur d'animation. Au lieu de cela, j'utiliserais de préférence divs ou tels avec le positionnement absolu. De cette façon, le déplacement d'une cellule n'affectera pas les autres cellules. Avec jQuery, je pense que vous pouvez animer l'attribut css "left", et le faire passer juste en dehors de la fenêtre. Attachez un rappel à cette animation et vous êtes prêt à tout déplacer vers l'arrière de la file d'attente.

Answer 2

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

cela peut vous aider à