0

我正在为客户端使用 jPlayer，其中进度条是曲目的标题。随着曲目的进行，它会改变颜色。我通过让一个标题为一种颜色的 div 来实现这一点，并将进度条绝对定位在它的顶部，标题为另一种颜色。因此，随着进度条的展开，它会显示新的彩色文本。如果我的描述很糟糕（我敢肯定），您可以在此处查看开发站点：

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

如您所见，单字标题的进展效果很好。但是在多个单词标题上，第一个单词显示得很好，然后对于后续单词，直到整个单词完成后才会显示。

这是浏览器渲染问题还是我可以做些什么来解决这个问题？

首先是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 回答