• 内容循环滚动的表格


    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .message{ font-size:12px;color: red; border-bottom: 1px dashed #CCCCCC; margin-bottom: 5px;;}
    table {
    border-collapse: collapse;
    border-spacing: 0px;
    border: none;
    600px;
    }
    td {
    border: 1px solid #CCCCCC;
    }
    .title {
    background-color: #EAEAEA;
    color: #333333;
    }
    .rollDiv {
    padding: 1px;
    overflow: hidden;
    height: 100px;
    }
    .rollDiv table td {
    font-size: 12px;
    border: none;
    }
    </style>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $(".rollContent").css("margin-top","0px");///很重要,IE9以下的没有此行代码无法正常运行
    var count1=0;
    $(".rollDiv").height($(".rollContent").height());
    var rollCount = 0;
    var content = $(".rollContent").html();
    $(".rollContent").append(content);
    setInterval(function() {
    ++rollCount;
    if ($(".rollContent").children().first().height() == rollCount) {
    $(".rollContent").append(content);
    $(".rollContent").children().first().remove();
    $(".rollContent").css({
    "margin-top": "+=" + rollCount
    });
    rollCount = 0;
    }
    $(".rollContent").css({
    "margin-top": "-=" + 1
    });
    }, 100);
    });
    </script>
    </head>

    <body>
    <div class="message">内容循环滚动的表格</div>
    <div>
    <table>
    <tr class="title">
    <td>姓名</td>
    <td>姓名</td>
    <td>姓名</td>
    <td>姓名</td>
    <td>姓名</td>
    <td>姓名</td>
    </tr>
    <tr>
    <td colspan="6">
    <div class="rollDiv">
    <div class="rollContent">
    <table>
    <tr>
    <td>姓名1</td>
    <td>姓名1</td>
    <td>姓名1</td>
    <td>姓名1</td>
    <td>姓名1</td>
    <td>姓名1</td>
    </tr>
    <tr>
    <td>姓名2</td>
    <td>姓名2</td>
    <td>姓名2</td>
    <td>姓名2</td>
    <td>姓名2</td>
    <td>姓名2</td>
    </tr>
    <tr>
    <td>姓名3</td>
    <td>姓名3</td>
    <td>姓名3</td>
    <td>姓名3</td>
    <td>姓名3</td>
    <td>姓名3</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名5</td>
    <td>姓名5</td>
    <td>姓名7</td>
    <td>姓名8</td>
    <td>姓名4</td>
    <td>姓名43</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    <tr>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    <td>姓名4</td>
    </tr>
    </table>
    </div>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </body>

    </html>

  • 相关阅读:
    装饰器模式
    mockups 安装
    单例设计模式
    css优先级问题
    GPU的nvadiasmi解析
    conda配置镜像并安装gpu版本pytorch和tensorflow2
    索引的优化
    [转]必须掌握的八个【cmd 命令行】
    BDE莫名的不自动COMMIT问题
    窗体控件笔记
  • 原文地址:https://www.cnblogs.com/cz-xjw/p/4101113.html
Copyright © 2020-2023  润新知