table表格数据无缝循环滚动
分享一个好看的表格无缝滚动:(实战用起来很舒服)
直接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;
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;
}
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","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);
})}
效果图:
table表格数据无缝循环滚动相关推荐
- table表格数据无缝循环向上滚动,hover后暂停滚动
先来效果图: 直接复制代码到vue就好了 <template><div class="listDiv"><div class="tableD ...
- vue实现数据无缝循环滚动
通过定时器控制数据的margin-top实现数据滚动,滚动到一定位置时将数组的前几条数据push进数组,同时把这几条数据删除 废话不说了,上代码 <div class="realDat ...
- asp.net将内容导出到Excel,Table表格数据(html)导出EXCEL
代码: 1 /// <summary> 2 /// HTML Table表格数据(html)导出EXCEL 3 /// </summary> 4 /// <param n ...
- Vue + Element-ui 实现table表格 数据相同项合并
Vue + Element-ui 实现table表格 数据相同项合并 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
- 使用Pandas的read_html方法读取网页Table表格数据
本文通过一个小实例,说明使用Pandas的read_html方法读取网页Table表格数据 要读取的网页表格数据 http://vip.stock.finance.sina.com.cn/q/go.p ...
- 无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试. <html> <head> <meta http-equiv=&quo ...
- vue-seamless-scroll无缝循环滚动时二轮图片不渲染
关于使用vue-seamless-scroll实现图片无缝循环滚动时出现第二轮图片需要第一轮图片滚动结束后才能渲染出来的问题. 1.我遇到的问题很清楚,就是图片应该无缝循环滚动,但是必须得等前一轮图片 ...
- html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
- element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现 查看Element官网 关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
最新文章
- cmd删除oracle监听,oracle数据库监听删除
- C++ 协程介绍[译]
- 美智库发布报告:《美国在人工智能时代的行动蓝图》
- Resource temporarily unavailable 错误
- 如何应用设计模式设计你的足球引擎
- 2018年第九届蓝桥杯 - 省赛 - C/C++大学B组 - G.螺旋折线
- 工作146:webstorm持续updating indices解决方法
- C#中全角转半角以及半角转全角
- oracle配置ipv6_配置 IPv6 接口
- 介绍下BFC,IFC,GFC和FFC
- 增持风行网 百视通在下一盘很大的棋
- 【element-ui】el-table中slot-scope的使用,用于动态绑定className等
- 家中买的计算机配置,配置,教您买电脑主要看哪些配置
- 今日凌晨Vue3 beta版震撼发布,竟然公开支持脚手架项目!
- 求一个数的最大真约数
- 重力勘探正演模拟matlab,裴雪林, 郭万松 (1995) 高精度重力勘探技术在国内外的应用. 断块油田, 5, 8-11....
- 2-- 关机/重启 、 创建 / 切换目录
- my name is van
- 对比学习+分割 | 论文阅读
- C# 获取可执行文件EXE(文件夹)路径大全