9

jQueryで100％シームレスなマーキーを作成することは可能ですか（またはjavascriptだけですが、jQueryが推奨されます）？

画面から消えるまで左に移動し、（見えないときに）右にジャンプして再開する単純なマーキーを作成しました。しかし、私はそれが待たないことを望みます。

これを行うために私が考えることができる唯一の方法は、テキストを複製して最初のテキストの後に置き、次にそれらを再び入れ替えることです。ただし、これをjQueryに実装する方法がわかりません。私は、jQueryを調べてきましたが.clone()、正しく機能させることができず、すべてがジャンプします。

何か案は？

御時間ありがとうございます、

4

1 に答える 1

23

次のマークアップが与えられます：

<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年代のレトロな外観を再現しようとしている場合は便利です。

于 2010-01-26T22:18:49.490 に答える