Javascript 无缝 jQuery 选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2143056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Seamless jQuery Marquee?
提问by Pez Cuckow
Is it possible to create a 100% seamless marquee in jQuery (or just javascript but jQuery prefered)?
是否可以在 jQuery 中创建 100% 无缝选取框（或者只是 javascript 但 jQuery 更喜欢）？
I've made a simple marquee that moves left until it is off the screen then simply jumps (when out of view) to the right and starts again. However I would love it to not have the wait.
我制作了一个简单的选取框，它向左移动直到它离开屏幕，然后简单地（在视线之外）向右跳，然后重新开始。但是，我希望不要等待。
The only way I could think of doing this would be to duplicate the text and put it after the first text, then swap them round again. However I have no idea how to implement this in jQuery, I've been looking at jQuery's .clone()but can't get it working correctly, everything jumps.
我能想到的唯一方法是复制文本并将其放在第一个文本之后，然后再次交换它们。但是我不知道如何在 jQuery 中实现这一点，我一直在研究 jQuery，.clone()但无法使其正常工作，一切都在跳跃。
Any ideas?
有任何想法吗？
Thanks for your time,
谢谢你的时间，
回答by Joel
Given the following markup:
鉴于以下标记：
<div id="marquee">My Text</div>
For the duplication, I'd do something like this:
对于重复，我会做这样的事情：
$("#marquee").wrapInner("span"); // wrap "My Text" with a new span
$("#marquee").append($("#marquee span").clone().hide()); // now there are two spans with "My Text"
Moving and swapping the spans is pretty easy. Here's a fully functional example:
移动和交换跨度非常容易。这是一个功能齐全的示例：
$(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"));
});
Disclaimer:
免责声明：
I don't recommend this for any professional website. However, it might be useful if you're trying to reproduce a retro 1990's look.
我不建议将其用于任何专业网站。但是，如果您想重现 1990 年代的复古外观，它可能会很有用。
