Nahtlose jQuery Marquee?

Question

Ist es möglich, einen 100% nahtlosen Marquee in jQuery (oder einfach nur Javascript, aber jQuery bevorzugt) erstellen?

Ich habe eine einfache Festzelt gemacht, dass sich nach links bewegt, bis sie aus dem Bildschirm ist dann springt einfach (wenn der Blick aus) nach rechts und wieder beginnt. Ich würde es aber gerne nicht die Wartezeit haben.

Die einzige Art, wie ich dies zu tun denken könnte, wäre, den Text zu kopieren und sie nach dem ersten Text setzen, tauscht sie dann wieder um. Ich habe aber keine Ahnung, wie dies zu implementieren in jQuery, ich habe auf jQuery .clone() suchen, aber kann es nicht richtig bekommen arbeiten, alles springt.

Irgendwelche Ideen?

Vielen Dank für Ihre Zeit,

Answer 1

In Anbetracht der folgenden Markup:

<div id="marquee">My Text</div>

Für die Vervielfältigung, ich so etwas tun würde:

$("#marquee").wrapInner("span"); // wrap "My Text" with a new span
$("#marquee").append($("#marquee span").clone().hide()); // now there are two spans with "My Text"

Verschieben und die Spannweiten Swapping ist recht einfach. Hier ist ein voll funktionsfähiges Beispiel:

$(function() {

    var marquee = $("#marquee"); 
    marquee.css({"overflow": "hidden", "width": "100%"});

    // wrap "My Text" with a span (old versions of IE don't like divs inline-block)
    marquee.wrapInner("<span>");
    marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
    marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"

    // create an inner div twice as wide as the view port for animating the scroll
    marquee.wrapInner("<div>");
    marquee.find("div").css("width", "200%");

    // create a function which animates the div
    // $.animate takes a callback for when the animation completes
    var reset = function() {
        $(this).css("margin-left", "0%");
        $(this).animate({ "margin-left": "-100%" }, 3000, 'linear', reset);
    };

    // kick it off
    reset.call(marquee.find("div"));

});

Sehen sie in Aktion .

Hinweis:

ich dies nicht für professionelle Website empfehlen. Allerdings könnte es nützlich sein, wenn Sie versuchen, einen Retro-Look der 1990er Jahre zu reproduzieren.