Бесшовные JQuery Marquee? - PullRequest
Новая
       17

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

9 голосов
/ 27 января 2010

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

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

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

Есть идеи?

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

1 Ответ

22 голосов
/ 27 января 2010

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

<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"));

});

См. Это в действии .

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

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

...