使这个复古计算机扫描线更加流畅。在 div 中扫描多个线路很困难。

Question

这里是可工作的代码片段： http://jsfiddle.net/WyXLB/1/

当一个HTML元素包含多行文本时，我想逐行扫描。目前，我只能扫描整个元素的边框矩形。

一些代码：

function run_scan(el,mask,callback) {
    // we need to go over each line of text in here
    // or somewhere
    var el_font_size = $(el).css('font');
    $('body').append(sizer);
    sizer.css({
        'position': 'absolute',
        'font' : el_font_size,
        'white-space' : 'pre' } );
    var real_box = window.getComputedStyle(sizer[0]);
    var real_width = parseFloat(real_box.width);
    var real_height = parseFloat(real_box.height);
    var lines = Math.round($(el).height()/real_height);
    var mask_offset = $(mask).offset();
    var origin_left = mask_offset.left;
    var duration = parseFloat($(mask).width())/2.0;
    $(mask).animate( {
        'left':origin_left+$(mask).width()
        },
        {
            duration:duration,
            complete:callback
        } );
}

我该如何让动画覆盖整个边界矩形，以便逐行扫描。我尝试在上面的函数中放置一个animation->callback递归，每次调用将掩码下降一个real_height，但得到了不可预测/混乱的行为。

- Cris Stringfellow

---

感谢那位点赞的善良之人。 - Cris Stringfellow

很好的编码 :) 如果有换行符，请检查一下。或者你可以尝试使用jQuery将每一行放在<span>标签之间，这样你就不用编辑扫描函数了。 - Brainfeeder

你需要准备两个口罩，一个带边框用于线条，另一个用于需要隐藏的线条，口罩的高度需要与一行的大小相同。你需要循环运行动画，直到所有行都完成，然后运行下一行。 - jcubic

@Brainfeeder 我喜欢你的建议。思维很棒！ - Cris Stringfellow

@jcubic 是的！你理解了。我目前正在尝试弄清楚如何运行这个线循环动画模式。 - Cris Stringfellow

Answer 1

如果您只需要循环，则应像这样编写代码（在run_scan内部）

    var i = 0;
    function loop() {
        if (++i < lines) {
            $(mask).animate({
                'left':origin_left+$(mask).width()
            },{
                duration:duration,
                complete:loop
            });
        } else {
            // last line
            callback();
        }
    }

- jcubic