0

SO私は自分のhtmlにテキストエリアを持っています

<textarea id="log" class="txtbx-log" rows="10"></textarea>

これを使用して、実行中のログをリアルタイムで表示しています。最初の行の不透明度を 100% にして、それ以降の各行の不透明度を 10 ずつ減らしたいと思います。

これは css/javascript で可能ですか?

複数の div を作成し、それぞれに独自の不透明度を与え、新しいログ メッセージが入ってくると、div/不透明度の位置を移動する可能性を認識しています。

しかし、それはログメッセージをある div から別の div に移動する醜いコードにつながります。これを行う簡単な方法はありますか。

** 編集 **

現時点では、このようなログ メッセージを先頭に追加するだけです。

on_chunk_uploaded: function() {
                        $('#log').prepend("<span>Chunk finished uploading</span>")
}
4

1 に答える 1

2

これの代わりに...

on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")
}

このようにすることができます... (あなたが述べたように、ログごとに 10 個のメッセージしか表示されない場合は?)

on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")

    // If there are now more than 10 log lines, remove the last one
    if($('#log span').length > 10){
        $('#log span:last').remove();
    }

    // Remove all classes from the log lines
    $('#log span').removeClass();
    var opacity = 100;

    // Cycle through each line and add decrementing opacity classes
    $.each($('#log span'), function(index, $element){
        $element.addClass('opacity-' + opacity);
        opacity = opacity - 10;
    });
}

次に、不透明度-100から不透明度0までの適切なCSSを追加します...（テストされていません！）

CSS:

.opacity-100
{
   /* Opaque, doesn't need transparency... */
}
.opacity-90
{
   opacity: 0.9;
   filter:Alpha(opacity=90);
}
.opacity-80
{
   opacity: 0.8;
   filter:Alpha(opacity=80);
}
/* All the way down to 0... */

注:誤って不透明度に を追加したため、コードを編集しました。+ の代わりに (PHP の習慣)

于 2013-07-23T09:58:33.163 に答える