5

我希望这种扫描线效果能够正常工作。从左到右显示文本。仿佛阴极射线正在将其燃烧成屏幕上的荧光粉。

这个想法是滑过具有透明尖端的黑色行。这是一个 80% 的工作演示。 在此处输入图像描述 每行中最右边的黑色.maskdiv 不会展开。它必须。

我试图将.mask带有黑色背景的最右边的 div 保留为 inline-block 并使其全宽。我有点理解为什么请求不起作用（宽度：100% 将其他内联块推到下一行，这是正确的），但必须有一种方法可以在不破坏 javascript 宽度的情况下获得这个完整的右侧.

.row {
        font-family:'Courier New',Courier,monospace;
        font-size:16px;
        display:block;
        height:auto;
        width:100%;
        min-width:20%;
        position:relative;
        margin-right:0px;
}

.mask {
        display:inline-block;
        width:auto; /* 100% does not work */
        background:black;
        white-space:pre;
}
4

1 回答 1

2

这在 jsbin 上不起作用，因为它使用绝对定位（除非您查看全屏演示）.. 但无论如何我都提供了它供您将其复制/粘贴到您自己的浏览器http://jsbin.com/uteyik/12 / .. 以下是变更亮点：

CSS：

.row {
 ..
  position:absolute;   /* changed to absolute */

}
.mask {
  ..
  width:100%;  /* changed to 100% */
  position:absolute;   /*changed to absolute */
}

和javascript：

jQuery(document).ready(function() {
    function fill_box(rows) {
        var rowHeight = getSampleRowHeight();
        var thisRowHeight = 0;
        for(var i = 0; i < rows; i += 1) {
            $('.box').append('<div class="row" style="top: '+thisRowHeight+'"><div class="scan_cursor i1"> </div><div class="scan_cursor i2"> </div><div class="scan_cursor i3"> </div><div class="mask"> </div></div>');       
            thisRowHeight +=rowHeight;
        }   
    }

    fill_box(30);

    function tag_animate(el) {
        // animate the mask
        el.animate( {
            'margin-left' : '100%'
            }, 
            {
                complete : function () {        
                    tag_animate(el.parent().next().find('.mask'));
                }
            } 
        );
        // animate the stripes
        el.siblings().animate( {
            'margin-left': '100%'
            }, 
            {
               complete : function () {     
                   el.siblings().hide();
               }
            }
        );      
    }    

    tag_animate($('.box').find('.row').eq(0).find('.mask'));

    function getSampleRowHeight() {
        // get sample row height, append to dom to calculate
        $('.box').append('<div class="row" style="display: hidden"> <div class="scan_cursor i1"> </div></div>');
        var rowHeight = $('.row').height();
        $('.box').find('.row').remove();
        return rowHeight;
    }    
 });

解释：我首先创建一个虚拟行并计算它的高度。然后，我使用虚拟行高 x 行号创建具有position: absolute并从顶部定位它的行。这个想法是我想用绝对定位制作所有东西，这样当它是 100% 时，面具不会推动下面的条纹，而且行必须是绝对的，因为当我让它的内容消失时，我不想要行下面跳起来。

奖金：看到它以相反的方式工作（即文本消失）：http: //jsbin.com/uteyik/9这是我最初的（和不正确的）答案

于 2013-03-11T04:47:01.600 回答