Бесшовный шатер jQuery?
-
22-09-2019 - |
Вопрос
Возможно ли создать 100% бесшовный шатер в jQuery (или просто javascript, но предпочтительнее jQuery)?
Я сделал простой шатер, который перемещается влево до тех пор, пока не исчезнет с экрана, затем просто перескакивает (когда он вне поля зрения) вправо и запускается снова.Однако мне бы хотелось, чтобы не пришлось ждать.
Единственный способ, который я мог придумать для этого, - это продублировать текст и поместить его после первого текста, затем снова поменять их местами.Однако я понятия не имею, как реализовать это в jQuery, я просматривал jQuery .clone()
но не могу заставить его работать правильно, все скачет.
Есть какие-нибудь идеи?
Спасибо за ваше время,
Решение
Учитывая следующую разметку:
<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-х годов.