是否可以在 jQuery 中创建 100% 无缝选取框(或者仅使用 javascript,但首选 jQuery)?
我制作了一个简单的选取框,它向左移动直到离开屏幕,然后简单地跳到(在 View 之外时)向右并再次开始。不过,我希望不用等待。
我能想到的唯一方法是复制文本并将其放在第一个文本之后,然后再次交换它们。但是我不知道如何在 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 年代的复古外观,它可能会很有用。
关于javascript - 无缝 jQuery 选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2143056/