js实现表格无缝滚动效果

前端开发作者： 2024-08-19 19:50:01

table表格无缝向上滚动排名地市 ...

<!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%;
}
.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"}]
$.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 =八叔技术之家为你收集整理的js实现表格无缝滚动效果全部内容，希望文章能够帮你解决js实现表格无缝滚动效果所遇到的程序开发问题。