我想让这个扫描线效果正常工作。从左到右显示文本。就好像阴极射线将其燃烧到屏幕上的荧光粉中一样。
想法是滑过具有透明尖端的黑色行。 Here is a 80% working demo.
每行中最右边的黑色 .mask
div 不会展开。必须的。
我试图将最右边的 .mask
div 与黑色背景保留为 inline-block 并使其全宽。我有点理解为什么请求不起作用(width:100% 将其他内联 block 推到下一行,这才是正确的),但必须有一种方法可以在不破坏 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;
}
最佳答案
这在 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;
}
});
说明:我首先创建一个虚拟行并计算它的高度。然后,我创建具有 position: absolute
的行,并使用虚拟行高 x 行号将其从顶部定位。 想法 是我想让所有东西都具有绝对定位,这样 mask 在 100% 时不会将条纹推到下面,而且该行必须是绝对的,因为当我让它的内容消失时,我不希望下面的行跳起来。
bonus:看到它以相反的方式工作(即文本消失):http://jsbin.com/uteyik/9这是我最初的(也是错误的)答案
关于javascript - 完全展开这个 CSS inline-block div scan-line,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15322884/