无缝 jQuery 选框？

Question

是否可以在 jQuery 中创建 100% 无缝选取框（或仅使用 javascript，但首选 jQuery）？

我制作了一个简单的选框，它向左移动直到它离开屏幕，然后简单地跳到（当不在视野中时）向右并重新开始。不过，我希望它不用等待。

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

有什么想法吗？

感谢您的宝贵时间，

Answer 1

给定以下标记：

<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"));

});

See it in action.

免责声明：

我不建议任何专业网站使用此方法。但是，如果您想重现 1990 年的复古外观，它可能会很有用。