• 内容循环滚动的表格


    <!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>

  • 相关阅读:
    【2020-05-17】人生十三信条
    【2020-05-16】评价与骄傲
    【2020-05-15】每天都充满向上的激情
    【04NOIP普及组】火星人(信息学奥赛一本通 1929)(洛谷 1088)
    next_permutation(全排列算法)
    【03NOIP普及组】麦森数(信息学奥赛一本通 1925)(洛谷 1045)
    快速幂
    【03NOIP普及组】栈(信息学奥赛一本通 1924)(洛谷 1044)
    【06NOIP普及组】数列(信息学奥赛一本通 1937)(洛谷 1062)
    【00NOIP普及组】计算器的改良(信息学奥赛一本通 1910)(洛谷 1022)
  • 原文地址:https://www.cnblogs.com/cz-xjw/p/4101113.html
Copyright © 2020-2023  润新知