0

私はクライアントにjPlayerを使用しています。ここで、プログレスバーはトラックのタイトルです。トラックが進むにつれて色が変わります。これを実現するために、ある色のタイトルのdivを作成し、その上に進行状況バーを配置し、別の色のタイトルを付けます。したがって、進行状況バーが展開すると、新しい色のテキストが表示されます。私の説明がひどい場合（確かにそうです）、ここで開発サイトを見ることができます：

http://sublimio.matthew-ferry.com/sublimio/

ご覧のとおり、進行状況は1つの単語のタイトルで問題なく機能します。ただし、複数の単語のタイトルでは、最初の単語が正常に表示され、後続の単語については、単語全体が終了するまで表示されません。

これはブラウザのレンダリングの問題ですか、それともこれを修正するために何かできることはありますか？

最初のjs：

$('.track').each(
        function()
        {
            var player_id = '#' + $('.jp-jplayer', this).attr('id');
            var audio_id    = '#' + $('.jp-audio', this).attr('id');

            $('.jp-jplayer', this).jPlayer(
                {
                    "cssSelectorAncestor": audio_id,
                    swfPath: "js",
                    supplied: "mp3",
                    wmode:"window"


            }
            );

            $('.song', this).click(
                function(eve)
                {
                    eve.preventDefault();
                    $(this).jPlayer("progress");
                    $('.jp-jplayer').jPlayer("stop");
                    $(player_id).jPlayer(
                        "setMedia", 
                        {
                            mp3: $(this).attr("href")
                        }
                    );

                    $(player_id).jPlayer("play");
                    return false;
                }
            );
        }
    );

（簡略化された）HTML：

<ul>
<li class="track">
    <div>
        <div class="jp-controls">
            <span><a class="jp-play song" tabindex="1">play</a></span>
            <span><a class="jp-pause" tabindex="1">pause</a></span>
        </div>
        <div class="title">Title With Multiple Words</div>
        <div class="progress">
            <div class="jp-seek-bar">
                <div class="jp-play-bar">Title With Multiple Words</div>
            </div>
        </div>
    </div>
</li>
...etc...
</ul>
4

1 に答える 1

2

ハ、それを理解した。幅0％のプログレスバーは、オーバーフローテキストを複数の行に折り返していました。white-space: nowrap;プログレスバーのテキストで使用されていた修正

于 2011-10-31T02:43:45.760 に答える