5

このスキャン ライン効果を適切に機能させたいと考えています。テキストを左から右に表示します。まるで陰極線が画面上の蛍光体にそれを焼き付けているかのようです。

アイデアは、透明な先端を持つ黒い行を横切ってスライドすることです。これは 80% 動作するデモです。 ここに画像の説明を入力 すべての行の右端の黒い.maskdiv は展開されません。ちがいない。

黒い背景の一番右の.maskdiv をインライン ブロックとして保持し、全幅にしようとしました。リクエストが機能しない理由をある程度理解しています (width: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;
    }    
 });

説明：最初にダミーの行を作成し、その高さを計算します。次にposition: absolute、ダミーの行の高さx行番号を使用して、行を作成し、上から配置します。マスクが100％のときに下のストライプを押さないように、すべてを絶対配置で作成したかったのです。また、コンテンツを非表示にするので行が必要ないため、行は絶対でなければなりません。下にジャンプします。

ボーナス：逆の方法で機能することを確認してください（つまり、テキストが消えます）：http: //jsbin.com/uteyik/9これは私の最初の（そして間違った）答えでした

于 2013-03-11T04:47:01.600 に答える