Question

我使用这些代码行来突出显示我的句子，每个都可以，但我想逐行突出显示（此代码一起突出显示span标记中的所有行）

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

我的第一个想法是使用：第一行选择器和一个缓冲区，但不幸的是这个选择器在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来演示这种线条分离并对每一行应用淡出动画。将小提示中的突出显示代码调整为span.line元素并使用动画延迟应该没有问题，使用自定义字体不应该出现问题，因为Canvas API afaik优雅地接受了这一点。但是，如上所述，有一个问题：分离这个词。

在JQuery中逐行突出显示span标记内容

1 个答案: