无缝的jQuery Marquee？

是否有可能在jQuery（或只是javascript但jQuery首选）中创建100％无缝选框？

我做了一个简单的选框，向左移动直到它离开屏幕然后只是跳到（在视线外）向右，然后重新开始。 但是我希望它没有等待。

我能想到这样做的唯一方法是复制文本并将其放在第一个文本之后，然后再将它们换成圆形。 但是我不知道如何在jQuery中实现它，我一直在研究jQuery的.clone()但是无法使它正常工作，一切都在跳跃。

有任何想法吗？

谢谢你的时间，

Answer 1

鉴于以下标记：

 
My Text 

对于复制，我会做这样的事情：

 $("#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齐全的例子：

 $(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(""); 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("
"); 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年代的复古风格，它可能会很有用。