jquery - 在JQuery中逐行突出显示span标签内容

Question

我使用这些代码行来突出显示我的句子，一切都很好，但我想逐行突出显示(此代码一起突出显示跨度标记中的所有行)

JavaScript 代码

$(document).ready(function(){

  var seconds = 5;
  var el = $('span#test');
  var width = el.outerWidth();
  var height = el.outerHeight();
  var wrapper = $('<span>').css({
    width: width + 'px',
    height: height + 'px',
    position: 'relative'
  });
  var background = $('<span>').css({
    width: 0,
    height: height + 'px',
    position: 'absolute',
    background: '#0f0'
  });
  wrapper.append(background);
  wrapper.append(el.css('position','absolute'));
  $('body').append(wrapper);
  background.animate({width: '+=' + width},1000*seconds);

});​

我该怎么做？

我知道我可以通过将其拆分为字符来做到这一点(像这样: Highligh Line By Line )，但我使用了自定义字体。

我的演示: http://jsfiddle.net/9UgEF/41/

请帮忙!

Answer 1

我的第一个想法是使用 :first-line 选择器和缓冲区，但不幸的是这个选择器在 jQuery/Sizzle 中不可用，所以我想出了另一个解决方案来分割 span 基于 span 的宽度。不过它利用了 Canvas 2D API。

解决问题的基本方法是每行使用 $.fn.animate()，例如为每行应用带有启动延迟的动画，如下所示:

// apply animation per line (fading out as example)
$('span .line').each(function(idx) 
{
    $(this).wrap('<span class="linecontent">');
    $(this).delay(idx * 1500).fadeOut(1500);
});

使用 JavaScript 时，将段落拆分为行会出现问题。我应用的解决方案基于使用 RegEx 单词边界分隔单词，如果除了纯文本之外还有任何其他内容需要换行，这将出现问题。不过，任何非空白 Unicode 字符都应被识别为单词的一部分。

这是单词分隔代码(期望跨度内的文本内容):

// split words
words = ($('span').text().split(/\W/));
lineWidth = $('span').width() - 80; // security offset

canvas = document.createElement('canvas');

$(canvas).css(
{
    'height': $('span').height(),
    'width': lineWidth
});
ctx = canvas.getContext('2d');
ctx.font = $('span').css('font');

line = []; 
lines = [];

while (words.length > 0)
{
    metrics = ctx.measureText(line.join(' '));

    if (metrics.width < lineWidth) 
    {
        line.push(words.shift());         
    } else 
    {
        lines.push(line);
        line = [];
    }
}

$('span').empty();
sp = $('span');
$(lines).each(function() 
{
    l = $('<span class="line">').append(this.join(' '));
    $(l).css('display', 'inline-block');
    $(sp).append(l);
});

我创建了一个fiddle演示了这种线条分离并对每条线条应用淡出动画。将 fiddle 中的突出显示代码调整为在 span.line 元素上工作并使用动画延迟应该没有问题，而且使用自定义字体也不应该出现问题，因为 Canvas API 相信优雅地接受这一点。但正如上面提到的，有一个问题:“分离”这个词。