0

所以我的 html 中有一个 textarea

<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;
    });
}

然后添加一些适当的 CSS，透明度从 opacity-100 到 opacity 0...（未经测试！）

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 回答