无缝的jQuery字幕? [英] Seamless jQuery Marquee?
问题描述
是否有可能在jQuery中创建100%无缝的字幕(或仅使用JavaScript,但首选jQuery)?
Is it possible to create a 100% seamless marquee in jQuery (or just javascript but jQuery prefered)?
我制作了一个简单的选取框,该选取框向左移动直到离开屏幕为止,然后简单地(在视线之外)向右跳转并重新开始.但是我希望它没有等待.
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.
我想到的唯一方法是复制文本并将其放在第一个文本之后,然后再次交换它们.但是我不知道如何在jQuery中实现它,我一直在看jQuery的.clone()
,但是不能使其正常工作,一切都会跳跃.
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.
有什么想法吗?
感谢您的时间,
推荐答案
给出以下标记:
<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"));
});
免责声明:
对于任何专业网站,我都不推荐这样做.但是,如果您想重现1990年的复古外观,这可能会很有用.
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.
这篇关于无缝的jQuery字幕?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!