table内容循环滚动
2019-03-05 本文已影响0人
懵懵圈
- 第一种方法
<div class="frame-left-1">
<style>
.tablebox {
height: calc(45vh - 123px);
overflow: hidden;
position: relative;
width: 100%;
}
.table-header table {
width: 100%;
}
.table-header table tr th {
color: #fff;
}
.tbl-body {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.tablebox table {
width: 100%;
}
.tablebox table th {
color: #fff;
font-size: 15px;
padding: 2px;
}
.tablebox table td {
color: #73AAE5;
padding: 5px;
font-size: 15px;
text-align: center;
}
.tablebox table tr th {
background-color: #24CBFF;
cursor: pointer;
}
.tbl-body tr:nth-child(even) td {
background-color: #2B2753;
}
.tablebox table tr td span,
.tablebox table tr td span {
font-size: 24px;
}
.tablebox table tr {
cursor: pointer;
}
.tbl-body table tbody tr:hover>td {
background-color: #2379B2 !important;
color: #fff;
}
</style>
<div style="padding: 0px 10px;">
<div class="inTitle" style="text-align: left;">违规车辆信息</div>
<div class="table-header">
<table cellspacing="0" cellpadding="0">
<thead>
<tr style="background:#24CBFF;height: 30px;">
<th style="width:10%;">序号</th>
<th style="width:30%;">车牌号</th>
<th style="width:20%;">颜色</th>
<th style="width:40%;">报警类型</th>
</tr>
</thead>
</table>
</div>
<div class="tablebox">
<div class="tbl-body">
<table cellspacing="0" cellpadding="0">
<tbody></tbody>
</table>
</div>
</div>
</div>
<script>
var MyMarhq = '';
clearInterval(MyMarhq);
$('.tbl-body tbody').empty();
$('.tbl-header tbody').empty();
var str = '';
var Items = [{
"index": 1,
"Ranking": "桂FC8980",
"City": "红色555",
"SaleIncome": "车辆非法位移",
}, {
"index": 2,
"Ranking": "桂FC8980",
"City": "白色",
"SaleIncome": "车辆非法位移",
}, {
"index": 3,
"Ranking": "桂FC8980",
"City": "红色",
"SaleIncome": "车辆非法位移",
}, {
"index": 4,
"Ranking": "桂FC8980",
"City": "白色",
"SaleIncome": "车辆非法位移",
}, {
"index": 5,
"Ranking": "桂FC8980",
"City": "红色",
"SaleIncome": "车辆非法位移",
}, {
"index": 6,
"Ranking": "桂FC8980",
"City": "白色",
"SaleIncome": "车辆非法位移",
}, {
"index": 7,
"Ranking": "桂FC8980",
"City": "红色",
"SaleIncome": "车辆非法位移",
}, {
"index": 8,
"Ranking": "桂FC8980",
"City": "白色",
"SaleIncome": "车辆非法位移",
}, {
"index": 9,
"Ranking": "桂FC8980",
"City": "红色",
"SaleIncome": "车辆非法位移",
}, {
"index": 10,
"Ranking": "桂FC8980",
"City": "白色",
"SaleIncome": "车辆非法位移",
}, {
"index": 11,
"Ranking": "桂FC8980",
"City": "红色",
"SaleIncome": "车辆非法位移",
}, {
"index": 12,
"Ranking": "桂FC8980",
"City": "白色5555",
"SaleIncome": "车辆非法位移",
}]
$.each(Items, function(i, item) {
var newStr = '';
var firstTd = '';
if (item.index <= 5) {
firstTd = '<div class="newClass" style="display: inline-block;">' + item.index + '</div>'
} else {
firstTd = '<div class="newClass2" style="display: inline-block;">' + item.index + '</div>'
}
str = '<tr class="tbodyTr_' + item.index + '" onclick="clickTr()">' +
'<td style="width:10%;">' + firstTd + '</td>' +
'<td style="width:30%;">' + item.Ranking + '</td>' +
'<td style="width:20%;">' + item.City + '</td>' +
'<td style="width:40%;">' + item.SaleIncome + '</td>' +
'</tr>'
$('.tbl-body tbody').append(str);
$('.tbl-header tbody').append(str);
$(".newClass").css({
'font-size': '10px',
'text-align': 'center',
'width': '20px',
'height': '20px',
'line-height': '20px',
'border-radius': '50%',
'color': 'rgb(255, 255, 255)',
'background-color': 'rgb(241, 70, 70)',
})
$(".newClass2").css({
'font-size': '10px',
'text-align': 'center',
'width': '20px',
'height': '20px',
'line-height': '20px',
'border-radius': '50%',
'color': 'rgb(255, 255, 255)',
'background-color': 'rgb(72, 76, 220)',
})
});
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-body tbody").hover(function() {
clearInterval(MyMarhq);
}, function() {
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq, speedhq);
})
}
function clickTr(item) {
clearInterval(MyMarhq);
var winInfo = "toolbar=no,menubar=no,status=yes,scrollbars=no,resizable=no,titlebar=no,location=no,width=" + (window.screen.availWidth * 0.6) + ",height=" + (window.screen.availHeight * 0.8) + ",top=100%,left=350%,fullscreen=no";
window.open('http://baidu.com', '', winInfo);
}
</script>
</div>
- 第二种方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<style>
table,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
border-collapse:collapse;
border-spacing:0;
border:0px;
}
.tablebox {
width:300px;
height:400px;
overflow:hidden;
margin:50px auto;
}
.tablebox table {
width:100%;
}
.tablebox table th {
color:#2584e3;
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div class="tablebox" style="border: 1px solid #000">
<table id="tableId" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>车牌号</th>
<th>颜色</th>
<th>报警类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>桂FC8980</td>
<td>红色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8944</td>
<td>白色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8980</td>
<td>蓝色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8980</td>
<td>绿色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8944</td>
<td>灰色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8980</td>
<td>橘色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<th>车牌号</th>
<th>颜色</th>
<th>报警类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>桂FC8980</td>
<td>红色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8944</td>
<td>白色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8980</td>
<td>蓝色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8980</td>
<td>绿色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8944</td>
<td>灰色</td>
<td>车辆非法位移</td>
</tr>
<tr>
<td>桂FC8980</td>
<td>橘色</td>
<td>车辆非法位移</td>
</tr>
</tbody>
</table>
</div>
<script>
tableScroll('tableId', 400, 30, 10)
var MyMarhq;
function tableScroll(tableid, hei, speed, len) {
clearTimeout(MyMarhq);
$('#' + tableid).parent().find('.tableid_').remove()
$('#' + tableid).parent().prepend(
'<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
//或者
//'<div style="height: 30px;overflow: hidden;position: relative;"><table><thead>' + $('#' + tableid ).html() + '</thead></table><div>'
).css({
'position': 'relative',
'overflow': 'hidden',
'height': hei + 'px'
})
$(".tableid_").find('th').each(function(i) {
$(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
});
$(".tableid_").css({
'position': 'absolute',
'top': 0,
'left': 0,
'z-index': 9
})
$('#' + tableid).css({
'position': 'absolute',
'top': 0,
'left': 0,
'z-index': 1
})
if ($('#' + tableid).find('tbody tr').length > len) {
$('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
$(".tableid_").css('top', 0);
$('#' + tableid).css('top', 0);
var tblTop = 0;
var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('#' + tableid).css('margin-top', tblTop + 'px');
clearTimeout(MyMarhq);
MyMarhq = setTimeout(function() {
Marqueehq()
}, speed);
}
MyMarhq = setTimeout(Marqueehq, speed);
$('#' + tableid).find('tbody').hover(function() {
clearTimeout(MyMarhq);
}, function() {
clearTimeout(MyMarhq);
if ($('#' + tableid).find('tbody tr').length > len) {
MyMarhq = setTimeout(Marqueehq, speed);
}
})
}
}
</script>
</body>
</html>
