<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>table表格无缝向上滚动</title>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<style>

.tablebox {

    height: 500px;

    overflow: hidden;

    position: relative;

    width: 1000px;

    margin: 100px auto;

    background-color: rgba(6,26,103,1);

}

.tbl-header {

    width: 100%;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 999;

}

.tbl-body {

    width: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.tablebox table {

    width: 100%;

}

.tablebox table th,

.tablebox table td {

    font-size: 24px;

    color: #7ca6f4;

    line-height: 45px;

    text-align: center;

}

.tablebox table tr th {

    background-color: #1f1f9c;

    cursor: pointer;

}

.tablebox table tr td {

    background-color: transparent;

}

.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {

    background-color: rgba(31, 31, 156, .5);

}

.tablebox table tr td span,

.tablebox table tr td span {

    font-size: 24px;

}</style>

</head>

<body>

    <div class="tablebox">

            <div class="tbl-header">

                <table border="0" cellspacing="0" cellpadding="0">

                    <thead>

                        <tr>

                            <th>排名</th>

                            <th>地市</th>

                            <th>销售收入(万元)</th>

                            <th>同比(%)</th>

                            <th>环比(%)</th>

                            <th>销售计划(万元)</th>

                            <th>计划完成率(%)</th>

                        </tr>

                    </thead>

                    <tbody style="opacity:0;"></tbody>

                </table>

            </div>

            <div class="tbl-body">

                <table border="0" cellspacing="0" cellpadding="0">

                    <thead>

                        <tr>

                            <th>排名</th>

                            <th>地市</th>

                            <th>销售收入(万元)</th>

                            <th>同比(%)</th>

                            <th>环比(%)</th>

                            <th>销售计划(万元)</th>

                            <th>计划完成率(%)</th>

                        </tr>

                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </div>

<script>

var MyMarhq = '';

clearInterval(MyMarhq);

$('.tbl-body tbody').empty();

$('.tbl-header tbody').empty();

var str = '';

var Items = [{"Ranking":"1","City":"保定","SaleIncome":"2506734.43","SaleRough":"296071.96","SalePlan":"7200000","PlanFinish":"34.82","TonOilincome":"264.15","OilTransform":"29.62","An":"53.00","Mom":"-13.00"},

    {"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","SaleRough":"93717.83","SalePlan":"3200000","PlanFinish":"44.56","TonOilincome":"366.59","OilTransform":"11.23","An":"65.00","Mom":"43.00"},

    {"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","SaleRough":"241071.82","SalePlan":"3000000","PlanFinish":"45.74","TonOilincome":"342.32","OilTransform":"6.61","An":"34.00","Mom":"7.00"},

    {"Ranking":"4","City":"衡水","SaleIncome":"972451.15","SaleRough":"87638.60","SalePlan":"2700000","PlanFinish":"36.02","TonOilincome":"246.03","OilTransform":"11.56","An":"15.00","Mom":"-18.00"},

    {"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","SaleRough":"140217.37","SalePlan":"7200000","PlanFinish":"13.04","TonOilincome":"139.44","OilTransform":"19.23","An":"-57.00","Mom":"-48.00"},

    {"Ranking":"6","City":"邢台","SaleIncome":"774274.70","SaleRough":"124693.90","SalePlan":"3700000","PlanFinish":"20.93","TonOilincome":"138.87","OilTransform":"9.44","An":"-20.00","Mom":"-44.00"},

    {"Ranking":"7","City":"唐山","SaleIncome":"680456.79","SaleRough":"50542.14","SalePlan":"3600000","PlanFinish":"18.90","TonOilincome":"243.60","OilTransform":"16.95","An":"-29.00","Mom":"-49.00"},

    {"Ranking":"8","City":"张家口","SaleIncome":"613319.87","SaleRough":"176075.96","SalePlan":"3000000","PlanFinish":"20.44","TonOilincome":"87.09","OilTransform":"7.97","An":"2.00","Mom":"-24.00"},

    {"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","SaleRough":"387024.26","SalePlan":"11000000","PlanFinish":"5.42","TonOilincome":"93.58","OilTransform":"19.06","An":"35.00","Mom":"6.00"},

    {"Ranking":"10","City":"承德","SaleIncome":"589048.12","SaleRough":"68966.73","SalePlan":"2200000","PlanFinish":"26.77","TonOilincome":"193.24","OilTransform":"11.29","An":"30.00","Mom":"-28.00"},

    {"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","SaleRough":"137934.72","SalePlan":"3500000","PlanFinish":"14.73","TonOilincome":"95.47","OilTransform":"8.80","An":"-48.00","Mom":"-3.00"},

    {"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","SaleRough":"85371.46","SalePlan":"2000000","PlanFinish":"19.99","TonOilincome":"114.42","OilTransform":"11.42","An":"128.00","Mom":"-30.00"},

    {"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","SaleRough":"20065.14","SalePlan":"430000","PlanFinish":"21.06","TonOilincome":"213.44","OilTransform":"20.45","An":"-24.00","Mom":"-17.00"},

    {"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","SaleRough":"8743.12","SalePlan":"250000","PlanFinish":"19.70","TonOilincome":"202.67","OilTransform":"29.95","An":"19.00","Mom":"-6.00"},

    {"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","SaleRough":"2175.66","SalePlan":"140000","PlanFinish":"21.20","TonOilincome":"730.20","OilTransform":"25.55","An":"-74.00","Mom":"-52.00"},

    {"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"}]

$.each(Items,function (i, item) {

    str = '<tr>'+

        '<td>'+item.Ranking+'</td>'+

        '<td>'+item.City+'</td>'+

        '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+

        '<td>'+(+item.An).toFixed(2)+'</td>'+

        '<td>'+(+item.Mom).toFixed(2)+'</td>'+

        '<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+

        '<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+

        '</tr>'

    $('.tbl-body tbody').append(str);

    $('.tbl-header tbody').append(str);

});

if(Items.length > 10){

    $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());

    $('.tbl-body').css('top', '0');

    var tblTop = 0;

    var speedhq = 50; // 数值越大越慢

    var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

    function Marqueehq(){

        if(tblTop <= -outerHeight*Items.length){

            tblTop = 0;

        } else {

            tblTop -= 1;

        }

        $('.tbl-body').css('top', tblTop+'px');

    }

    MyMarhq = setInterval(Marqueehq,speedhq);

    // 鼠标移上去取消事件

    $(".tbl-header tbody").hover(function (){

        clearInterval(MyMarhq);

    },function (){

        clearInterval(MyMarhq);

        MyMarhq = setInterval(Marqueehq,speedhq);

    })

}

</script>

</body>

</html>

最新文章

  1. gitHub使用入门和github for windows的安装教程
  2. 搭建 SubversionEdge for VS
  3. [译]rabbitmq 2.1 Consumers and producers (not an economics lesson)
  4. MyEclipse8.5集成Tomcat7时的启动错误：Exception in thread “main” java.lang.NoClassDefFoundError org/apache/commons/logging/LogFactory
  5. 2.2 sikuli中编程运行
  6. iOS 使用矢量图
  7. c#委托事件入门--第一讲：委托入门
  8. VMware Tools 继续运行脚本未能在虚拟机中成功运行。
  9. [译]Domain Events Pattern Example
  10. Java 之 JavaScript （一）
  11. curl: (7) Failed connect to 172.16.100.199:9200; 没有到主机的路由
  12. iBatis resultMap报错　nullValue完美解决
  13. PS学习之如何把小姐姐塞进瓶子里
  14. 在同一个Linux上配置多个git账户
  15. HDU 5663 Hillan and the girl (莫比乌斯反演 + 分块)
  16. Hibernate 一对多/多对多
  17. ServiceMetadataBehavior 的 HttpsGetEnabled 属性设置为 True，而 HttpsGetUrl 属性是相对地址，但没有 https 基址
  18. Solr 同义词搜索
  19. chrom锚点不能跳转的问题
  20. 使用eclipse导入web项目

热门文章

  1. [Swift]LeetCode757. 设置交集大小至少为2 | Set Intersection Size At Least Two
  2. 调用链Cat介绍
  3. 完整的http请求分析
  4. linux安装RabbitMQ
  5. C++版 - UVa1585 Score - 题解
  6. putty 默认颜色样式修改 for windows
  7. [四] java虚拟机JVM编译器编译代码简介 字节码指令实例 代码到底编译成了什么形式
  8. js内存深入学习（一）
  9. Python之在函数中使用列表作为默认参数
  10. Atom编辑器插件