react表格无缝滚动_js实现表格无缝滚动效果
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;
}
排名地市销售收入(万元)同比(%)环比(%)销售计划(万元)计划完成率(%)
排名地市销售收入(万元)同比(%)环比(%)销售计划(万元)计划完成率(%)
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= '
'+
'
'+item.Ranking+''+
'
'+item.City+''+
'
'+(+item.SaleIncome/10000).toFixed(2)+''+
'
'+(+item.An).toFixed(2)+''+
'
'+(+item.Mom).toFixed(2)+''+
'
'+(item.SalePlan/10000).toFixed(2)+''+
'
'+(+item.PlanFinish).toFixed(2)+''+
'
'$('.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);
})
}
react表格无缝滚动_js实现表格无缝滚动效果相关推荐
- React+Typescript实现一个甘特图表格
React+Typescript实现一个甘特图表格 好久没更新博客了,最近工作写了一个有趣的东西,想和大家分享一下 照例先放效果图 准备项目,直接放出依赖项目 {"name": & ...
- php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章 先看一张效果图 思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
- html表头跟随滚动,JS实现table表格固定表头且表头随横向滚动而滚动_心善_前端开发者...
先看一张效果图 思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获 ...
- dw自动滚动图片_DW图片无缝滚动代码
DIV 的图片无缝滚动 , DIV 图片上无缝滚动 , DIV 图片下无缝滚动 , DIV 图片左无缝滚动 , DIV 图片右无缝滚动 1. 先了解一下对象的几个的属性: innerHTML: 设置或 ...
- html横向自动滚动代码,不间断无缝滚动代码(横向、竖向)
一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆副本,通过不断改变demo1的scrollTop或者scroll ...
- php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
- elementUI el-table设置fixed后,竖向滚动条滚动到底部表格错位的问题(修改源码)
问题:el-table在设置了fixed的条件下,滚动竖向滚动条到最底部的时候,会出现表格错位的问题. 原因:fixed部分也是一个表格,在有滚动条的时候没有加上滚动条的高度,所以会导致错位. 通过阅 ...
- element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动
element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动 是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
- jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图 直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...
最新文章
- python圣诞树代码成品图片动态_Python 圣诞树和樱花树源码
- mysql slave 线程 简书_【MySQL】你真的读懂了slave status吗?
- 【hibernate merge】session1.merge(T entity)方法的含义和update方法的区别
- python自动控制程序_巧用 python 脚本控制你的C程序
- Linux内核分析 - 网络[七]:NetFilter
- 又一尴尬问题!不少用户反馈iPhone 12屏幕特别“黄”
- VoltDB开篇 简介
- RHCE课程-RH253Linux服务器架设笔记五-APACHE服务器配置(2)
- php薪资图表,加薪利器,老板再也不用担心生成图表图片了
- 2022电大国家开放大学网上形考任务-大学语文非免费(非答案)
- 量子子计算机可以传送吗,量子隐形传送是可能的吗?是
- spine 局部换装
- 一本通 3.1 例 1」黑暗城堡
- 解决PHP提示Warning: Division by zero in错误
- php多级分栏,网页设计中分栏布局的几种实现方案
- 关于DC-DC电源的总体概述
- Eureka注册中心的搭建与使用
- Linux 内核中RAID5源码详解之守护进程raid5d
- ucloud中的udisk错误“Read-only file system”修复指南
- 毕业设计-后台管理系统