Бесшовные jQuery Marquee?

Question

Можно ли создать 100% бесшовный шатер в jQuery (или просто javascript, но jQuery)?

Я сделал простую рамку, которая перемещается влево, пока она не с экрана, а затем просто прыгает (когда выходит из вида) вправо и начинается снова. Однако я бы хотел, чтобы у него не было ожидания.

Единственный способ, которым я мог бы это сделать, - это дублировать текст и помещать его после первого текста, а затем снова обменивать их. Однако я понятия не имею, как реализовать это в jQuery, я искал .clone() jQuery, но не могу заставить его работать правильно, все прыгает.

Любые идеи?

Спасибо за ваше время,

Answer 1

Учитывая следующую разметку:

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

Для дублирования, я бы что-то вроде этого:

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

Перемещение и замена пролетов является довольно легко. Вот полнофункциональный пример:

$(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.

Отказ от ответственности:

Я не рекомендую это для любого профессионального веб-сайта. Однако было бы полезно, если вы попытаетесь воспроизвести ретроспективный взгляд 1990-х годов.