是否有可能在jQuery来建立100%的无缝选取框(或只是JavaScript,但jQuery的者优先)?

我又做了一个简单选取框留下移动,直到它不在屏幕上然后只是跳到(当出的视图)向右和启动。但是我喜欢它没有等待。

我能想到这样做,这将是复制的文本,并把它的第一个文本后的唯一方法,然后再全面交换他们。但是我不知道如何实现这个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年的样子,可能是有用的。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top