html table表格无缝向上滚动效果,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);
})
}
html table表格无缝向上滚动效果,js实现表格无缝滚动效果相关推荐
- html加js实现滚动图片,js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2 ...
- html打字并自动滚动效果,js实现键盘自动打字效果
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale= ...
- html 图片自动滚动播放,JS实现图片自动滚动(图片横向滚动)
实带道术用量确示常构端析以要效开的用,近不现的效果就是 一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高 ...
- 左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
- html文字整体向上滚动代码,js实现文字无缝向上滚动
静态效果如下:(动态效果复制粘贴下面代码可见) 代码如下: *{ padding: 0; margin:0; } ul,li{ list-style: none } .scroll { height: ...
- html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
- php气泡效果,js 模拟气泡屏保效果代码_其他特效
核心代码: var T$ = function(id) { return document.getElementById(id); } var $extend = function(des, src) ...
- 微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动(多种表格演练)
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
- js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
最新文章
- Tessellation (曲面细分) Displacement Mapping (贴图置换)
- 【Git】在本地创建git库管理自己的代码
- Ubuntu11.04软件源--增强版
- lua实现多继承-方式1
- xmlhttprequest 跨域_跨域资源共享(CORS)安全性
- Javascritp入门
- MongoDb和LINQ:如何汇总和加入集合
- 中国条码解码器市场趋势报告、技术动态创新及市场预测
- find函数常见错误_如何利用FIND找出你要的数据-EXCEL-开篇3-字符串函数系列-2
- 转载 hashtable和dictionary的区别
- 【个人笔记】OpenCV4 C++ 快速入门 06课
- 从零开始搭建PHP项目
- html引入苹方字体,原 前端项目,引入苹方字体
- android 平板root,安卓平板电脑怎么root 安卓平板一键root方法_硬件教程
- error C2065: “SHELLEXECUTEINFO”: 未声明的标识符
- OpenID实现多系统整合的用户同步解决方案
- Ubuntu Linux 8.04系统下智能拼音输入法
- pandas案例之消费金额和消费之间的关联与性别和吸烟与否的关系
- TCP SYN-Flood攻击
- 领英精灵和领英助理哪个好?为什么领英精灵是LinkedIn最好的配套工具?