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ただし、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 を使用するときに問題が発生します。私が適用した解決策は、正規表現の単語境界を使用して単語を分離することに基づいています。これは、純粋なテキスト以外にラップするコンテンツがある場合に問題を引き起こします。ただし、空白以外の 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 がこれを適切に受け入れるため、カスタム フォントを使用しても問題は発生しません。しかし、前述のように、問題が 1 つあります。単語の分離です。

于 2012-08-29T13:57:41.270 に答える