【html】table表格数据无缝循环滚动

分类：HTML作者：厦门德仔

分享一个好看的表格无缝滚动:(实战用起来很舒服)
分享一个好看的表格无缝滚动:(实战用起来很舒服)

直接copy代码到你的程序中:

1.HTML


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

2.CSS


.tablebox {
    height: 500px;
    overflow: hidden;
    position: relative;
    width: 1000px;
    margin: 100px auto;
   
}

.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 {
   
    cursor: pointer;
}

.tablebox table tr td {
   
}

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

.tablebox table tr td span,.tablebox table tr td span {
    font-size: 24px;
}

3.JavaScript

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

}

效果图:

在这里插入图片描述

原文地址：https://david.blog.csdn.net

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

html代码字体颜色做法
HTML代码中要想改变字体颜色，常常需要使用CSS样式表。CSS是一门用来描述网页上样式的语言，通过编写CSS代码可以实现网页中各元素的大小、颜色、字体等各种样式的控制。那么如何在HTML代码中应用CSS样式来改变字体颜色呢？这里为大家介绍一下。 首先，在HTML代码...
html代码字体盖住图片
HTML代码如何让字体盖住图片呢？需要使用CSS的position属性及z-index属性。 img { position: relative; z-index: -1; } p { position: absolute; to...
html代码字体设置
HTML代码字体设置 在HTML中，我们可以使用标签来设置网页中的文字字体。常用的字体标签是font和style，下面我们来学习如何使用这些标签。 1. font标签 使用font标签可以改变文字的字体、颜色和大小。它有三个属性font-family、color和...
html代码字体字号
在网页设计中，HTML代码的字体和字号选择是非常重要的一个环节，因为它们直接关系到页面的可读性和视觉效果。 要指定文本的字体和字号，可以使用HTML中的样式属性。使用样式属性设置字体和字号，如下所示： <p style="font-family: Aria...
html代码实现太极图
HTML（Hypertext Markup Language，超文本标记语言）是一种用于创建网页的标准语言。它由许多标签（一对尖括号包围的关键字）组成，这些标签告诉浏览器如何显示内容。使用HTML代码，我们可以轻松地创建各种类型的图像和图形，如太极图。 在HTM...
html代码实现外链
外链是指在一个网页中添加一个指向其他网站的链接，用户可以通过这个链接直接跳转到其他网站。在HTML中，实现外链的方法很简单，只需要使用标签就可以了。 <a href="http://www.example.com">这是一个外链，点击跳转到www.ex...
html代码实现报名界面
HTML代码是实现网页界面的基础，而网页中的各种表单则是用户和网站进行交互的重要方式之一。下面我们来介绍如何使用HTML代码实现一个简单的报名表格。 <form action="submit.php" method="post"> &lt...
html代码字体编辑器
HTML是一种标记语言，用于开发网站和其他互联网内容。字体是网站设计中的关键元素之一，它可以决定网站的整体风格和呈现效果。HTML提供了字体编辑器，使网站设计变得更加容易。 <font face="Arial"> 这里是Arial字体 &...
html代码字体样式
HTML代码中，字体样式是开发者们必备的一部分。在HTML中，我们可以通过特定的标签和属性设置字体的样式、颜色和大小，以达到更好的排版效果。 <p style="font-size: 14px; color: #333; font-family:...
html代码字体设为粗体
HTML中的字体可以设为粗体，以强调文本信息。我们可以通过使用一些标签来实现这一功能。其中，常用的标签包括： 1. 标签：该标签会把文本加粗显示，语法如下： 这是一段加粗的文本 2. 标签：与标签作用相同，但语义更强，表示该文本内容的重要性。语法如下：...
html代码实现文件上传与下载
HTML代码可以实现文件的上传和下载，在网页开发中相当常见。通过使用<input>标签和<form>标签，我们可以轻松创建一个文件上传表单。 <form action="upload.php" method="post" enct...
html代码如何转换时间戳
HTML代码非常常见于网页设计中。在一些需要处理时间相关数据的场景下，可能需要将时间戳转换为实际时间，这时候就需要使用一些特定的HTML代码。 function timeStamp2Time(time){ var date = new Date(time...
html代码实现下载文件到本地
HTML是一种用于创建网页的标记语言。在HTML中，我们可以使用超链接标签实现下载文件到本地的功能。 具体实现步骤如下： <a href="文件的URL" download="文件名">下载文件</a> 其中，href属性是文件...
html代码字体靠左
在HTML代码中，对于字体靠左对齐有各种方法。其中最简单的方式之一是使用pre标签。 使用pre标签可以保留一段文本中的空格和换行符，从而使代码排版更加整齐。下面是一个例子： <p>这是一个段落。</p> &lt...
html代码字典
HTML代码字典是一本解释HTML标记和属性的参考文献。这本字典中包含了最常用的HTML代码以及它们的属性和值的详细描述。 例如，以下是HTML代码字典中的一部分内容： <a href="url">link text</a> 在...
html代码实现一键复制
在网页开发过程中，遇到一些需要用户复制的内容，我们通常都会提供复制按钮，让用户更方便地复制所需内容。下面我们来介绍如何使用html代码实现一键复制的功能。 var copyBtn = document.querySelector('#copy-bt...
html代码实现登录页面
用户登录 欢迎来到公司登录界面，请输入用户名和密码登录 用户名： 密码： 代码解释： 第1行：定义了一个 HTML 文档 第2行：开始了 HTML 头部 第3行：定义了...
html代码字体竖着
HTML 代码是用来创建网页的语言，它包含了许多不同的元素和属性，让我们可以在网页中添加各种不同的元素和内容，如文字、图片、链接等等。在编写 HTML 代码时，我们可以使用各种不同的样式来美化我们的网页，例如更改字体、颜色、大小等等。 font-family:...
HTML代码字体转移
HTML代码中的字体转移 在编写HTML代码时，我们经常会使用各种字体来增强页面的可读性和视觉效果。但是，有些字符或特殊符号可能会在HTML中具有不同的含义，这就需要使用字体转义转换成HTML可以正常显示的字符。 在HTML中，使用"&"符号表示一个特殊字符将要被转...
html代码字体变色
HTML 编程语言中，你可以使用字体属性来更改文本的字体大小、颜色和样式。其中，字体颜色是最常用的样式更改。在 HTML 中，你可以使用 "color" 属性来更改文本的颜色。下面是一个使用 "pre" 标签的代码示例，演示如何使用 "color" 属性来更改字体颜色...
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot