2

我使用这些代码行来突出显示我的句子，每个细节都可以，但我想逐行突出显示（此代码一起突出显示 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/

请帮忙！

4

1 回答 1

2

我的第一个想法是使用 :first-line 选择器和缓冲区，但不幸的是，这个选择器在 jQuery/Sizzle 中不可用，所以我想出了另一种解决方案，span根据它span的宽度将行分割成 a 。它虽然使用了 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);
});

我创建了一个小提琴来演示这种线分离并向每条线应用淡出动画。调整小提琴中的突出显示代码以处理span.line元素并使用动画延迟应该没有问题，而且使用自定义字体也不应该出现问题，因为 Canvas API afaik 优雅地接受了这一点。但是，如上所述，有一个问题：分离这个词。

于 2012-08-29T13:57:41.270 回答