Nahtloses jQuery-Festzelt?

Question

Ist es möglich, eine 100% nahtlose Laufschrift in jQuery (oder nur Javascript aber jQuery bevorzugt) zu erstellen?

Ich habe ein einfaches Auswahlrechteck erstellt, das sich nach links bewegt, bis es vom Bildschirm verschwunden ist, springt dann einfach (wenn es nicht sichtbar ist) nach rechts und beginnt erneut. Allerdings würde ich es gerne nicht warten lassen.

Die einzige Möglichkeit, dies zu tun wäre, den Text zu duplizieren und nach dem ersten Text zu setzen, dann tauschen Sie sie wieder um. Allerdings habe ich keine Ahnung, wie dies in jQuery zu implementieren, ich habe auf jQuery .clone() angesehen, aber es funktioniert nicht richtig funktioniert, springt alles.

Irgendwelche Ideen?

Vielen Dank für Ihre Zeit,

Answer 1

das folgende Markup Gegeben:

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

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

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

bewegen und die Spannweiten Swapping ist ziemlich 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")); 

}); 

See it in action.

Haftungsausschluss:

ich das nicht für jede professionelle Website empfehlen. Es kann jedoch nützlich sein, wenn Sie versuchen, ein Retro-Look der 90er Jahre zu reproduzieren.