4

div に配置したすべてのテキストがマーキーに表示されていないようです。いつもあるところで切れます。すべてのテキストを表示する方法はありますか?

これはこれまでの私のコードです（http://jsfiddle.net/yLwhe/のデモ）

HTML

<div id="marquee">They came down the village, crossing ghostly forests, almost falling apart. Their bags were full: garlands, amethysts, gold, frankincense, myrrh. Incredible strings arrived with them: heavenly sounds drew water from marble stones, provoking visions never seen before. Who brought those tired magicians? Why had such a music enchanted our sordid souls? Was no answer available? Did we need one? Voices overheard told of incredible tales: children following mice, drowning, dead. Fear turned us into shivering salty statues, unable to look back. Many years later, explorers ventured and found this tiny town, every inhabitant eternally still, imprisoned forever by strange chords.</div>

CSS

#marquee {
    color: #000;
    height: 16px;
    padding-bottom: 5px;
}

JS

$(function() {

    var marquee = $("#marquee"); 
    marquee.css({"overflow": "hidden", "width": "100%"});

    // wrap "My Text" with a span (IE doesn'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"

    marquee.wrapInner("<div>");
    marquee.find("div").css("width", "200%");

    var reset = function() {
        $(this).css("margin-left", "0%");
        $(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);
    };

    reset.call(marquee.find("div"));

    });
4

5 に答える 5

4

元のコードでは、100%幅<span>(つまりwidth50%の内側) にテキスト全体が収まると想定していました。200%<div>

文字列に必要な幅を実際に計算し、それを使用してアニメーションを実行するように変更しました。

この変更されたバージョンを確認してください: http://jsfiddle.net/yLwhe/5/

すなわち:

...
marquee.find("span").css({ ... }); 

// get the actual used width
var w = marquee.find("span").width();

...
var reset = function() {
    $(this).css("margin-left", "0");

    // use calculated width for animation.
    $(this).animate({ "margin-left": "-"+w+"px" }, 40000, 'linear', reset);

};
于 2013-08-10T09:08:50.460 に答える
1

作業フィドル: http://jsfiddle.net/yLwhe/6/

まず、テキストがポイントでカットされる問題を取り除くために、以下に適用white-space: nowrapしdivます。

marquee.wrapInner("<div>");
marquee.find("div").css({
    "width": "100%",
    "white-space": "nowrap"
});

そうしないと、行の終わりに到達したときに行が途切れdivます。

第二に、次をアニメーション化しようとしている場所margin-left:

$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);

100%あなたが参照しているのは、それ自体またはその内容の幅ではなく、コンテナの幅であるため、これは機能しません。div代わりにこれを行う必要があります：

$(this).animate({ -$(this).find('span').width() + 'px' }, 10000, 'linear', reset);

divその子の 1 つのピクセルの長さを正確に移動しspansます。

于 2013-08-10T09:11:26.307 に答える
-2

div マーキーの幅を変更すると、問題が解決します。

marquee.css({"overflow": "hidden", "width": "100%"});

上記のコードでは、幅 100% を 308% に変更すると FF、Chrome (最新バージョン) で正常に動作し、幅 100% を 325% に変更すると IE で正常に動作します。

于 2013-08-10T09:33:44.403 に答える