-
<!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%;
-
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;
-
}</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"},
-
{"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);
-
})
-
-
}
-
</script>
-
-
</body>
-
</html>
js实现表格无缝滚动效果
【摘要】
<!doctype html><html><head><meta charset="utf-8"><title>table表格无缝向上滚动</title><script src="http://libs.baidu.com/jquery/1.11...
文章来源: blog.csdn.net，作者：经典鸡翅，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/hanqing456/article/details/111879021
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）