分了无缝对接和非无缝对接
1、刚开始做的时候,没有考虑无缝对接这个问题,效果就是不怎么好看,但是可以用,如果数据量多的时候是看不出区别,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="../../../../../../libs/jquery1.8.2/jquery-1.8.2.min.js"></script>
<style>
.w_newslist_box_newslistXXGX6 {
width: 100%;
float: left;
border: 1px solid #d2d2d2;
}
.w_newslist_head_newslistXXGX6 {
height: 34px;
width: 100%;
background: url(http://www.xnyqt.petrochina/sites/cqkglc/EX_STATICPAGES_/images/head.jpg) left top repeat-x;
border-bottom: 1px solid #d2d2d2;
}
.w_newslist_head_newslistXXGX6 h3 {
float: left;
height: 32px;
width: 96px;
text-indent: 35px;
background: url(http://www.xnyqt.petrochina/sites/cqkglc/EX_STATICPAGES_/images/title6.png) 5px center no-repeat;
border-bottom: 2px solid #d80000;
line-height: 32px;
color: #db0202;
font-weight: bold;
}
.fxzy {
height: 126px;
width: 100%;
border: 1px solid #fae5c3;
/*background: url(../images/ayfc_03.png) repeat-x;*/
overflow: hidden;
}
.fr {
float: right;
}
h3 {
display: block;
/*font-size: 1.17em;*/
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.fxzy table {
border: 1px solid #eee9d5;
text-align: center;
border-collapse: collapse;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.fxzy table th {
height: 34px;
font: 14px/34px '微软雅黑';
color: #000000;
text-align: center;
}
.fxzy table td {
padding: 10px 0;
color: #222;
}
h3 {
font-size: 90%;
margin: 0;
padding: 0;
font-family: Simsun, 宋体, verdana, arial, helvetica, sans-serif
}
.ms-WPBody {
font-size: 9pt;
font-family: Tahoma, "宋体";
}
.w_newslist_head_newslistXXGX6 a {
display: inline-block;
float: right;
font-size: 12px;
margin-right: 12px;
margin-top: 13px;
}
</style>
<body>
<div class="w_newslist_box_newslistXXGX6">
<!--<div class="w_newslist_inner_newslistXXGX6">-->
<!-- <div class="w_newslist_head_newslistXXGX6">
<h3 style="width: 160px">今日主要风险作业</h3>
<a href="/IMP/main.html?comp=App.view.riskOperationAndRiskPrompt.riskOperationAndRiskPrompturl" target="_blank">更多>></a>
</div>-->
<!--<div class="w_newslist_body_newslistXXGX6">-->
<div class="fxzy fr">
<table hidden="true" width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="41">序号</th>
<th width="72">作业分级</th>
<th width="90">单位</th>
<th width="74">作业地点</th>
<th width="130">作业名称</th>
<th style="word-wrap:break-word;">今日主要作业内容</th>
<th width="99">现场负责人</th>
</tr>
</tbody>
</table>
<div class="fxzy-wrap"
style="width: 100%;position: relative;height: 270px;overflow: hidden;display: block;">
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="demohq"
style="position: absolute; left: 0px; top: -26px;">
<tbody id="getRisk"></tbody>
</table>
</div>
</div>
<!--</div>-->
<!--<div class="w_newslist_foot_newslistXXGX6"></div>-->
<!--</div>-->
</div>
</body>
<script>
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
var demohq = $('#demohq'), scrollY = 0
function Marqueehq() {
// console.log(1)
if (scrollY == 270) {
scrollY = 0;
} else {
demohq.css('top', '-' + (scrollY++) + 'px');
}
}
var MyMarhq = setInterval(Marqueehq, 60)
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
$(function () {
$.getJSON('./json',
{
date: new Date().Format("yyyy-MM-dd")
// date: '2018-06-11'
},
function (json) {
$.each(json.result.content, function (index, value) {
$('#getRisk').append(
'<tr><td width="41"style="word-wrap:break-word;word-break:break-all;">' + (index + 1) + '</td>' +
'<td width="72"style="word-wrap:break-word;word-break:break-all;">' + value.RISK_TYPE + '</td>' +
'<td width="90"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_UNIT + '</td>' +
'<td width="74"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_PLACE + '</td>' +
'<td width="130" style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_NAME + '</td>' +
'<td style="word-wrap:break-word;">' +
value.CONTENT_RISK_TODAY + '</td>' +
'<td width="99" style="word-wrap:break-word;word-break:break-all;">' + value.ON_SITE_NAME + '</td></tr>'
)
})
})
}
)
</script>
</html>
2.无缝对接的效果,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="../../../../../../libs/jquery1.8.2/jquery-1.8.2.min.js"></script>
<style type="text/css">
.tablebox table td {
padding: 10px 0;
color: #222;
}
.tablebox table th {
height: 34px;
font: 14px/34px '微软雅黑';
color: #000000;
text-align: center;
}
.tablebox table {
border: 1px solid #eee9d5;
text-align: center;
border-collapse: collapse;
}
.tablebox {
height: 126px;
width: 100%;
border: 1px solid #fae5c3;
/*background: url(../images/ayfc_03.png) repeat-x;*/
overflow: hidden;
}
h3 {
font-size: 90%;
margin: 0;
padding: 0;
font-family: Simsun, 宋体, verdana, arial, helvetica, sans-serif
}
.fr {
float: right;
}
h3 {
display: block;
/*font-size: 1.17em;*/
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.tbl-body {
width: 100%;
position: relative;
top: 0;
display: block;
height: 270px;
overflow: hidden;
left: 0;
}
h3 {
display: block;
/*font-size: 1.17em;*/
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
h3 {
font-size: 90%;
margin: 0;
padding: 0;
font-family: Simsun, 宋体, verdana, arial, helvetica, sans-serif
}
.tablebox table {
width: 100%;
}
.fr {
float: right;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<div class="tablebox fr">
<div class="tbl-header">
<table hidden="true" border="1" width="100%" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="41">序号</th>
<th width="72">作业分级</th>
<th width="90">单位</th>
<th width="74">作业地点</th>
<th width="130">作业名称</th>
<th style="word-wrap:break-word;">今日主要作业内容</th>
<th width="99">现场负责人</th>
</tr>
</thead>
<tbody style="opacity:0;"></tbody>
</table>
</div>
<div class="tbl-body">
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="demohq"
style="position: absolute; left: 0px; ">
<thead hidden="true">
<tr>
<th width="41">序号</th>
<th width="72">作业分级</th>
<th width="90">单位</th>
<th width="74">作业地点</th>
<th width="130">作业名称</th>
<th style="word-wrap:break-word;">今日主要作业内容</th>
<th width="99">现场负责人</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script type="text/javascript">
var MyMarhq = '';
$('.tbl-body tbody').empty();
$('.tbl-header tbody').empty();
var str = '';
$(function () {
$.getJSON('./json/barchart.json',
{
// date: new Date().Format("yyyy-MM-dd")
// date: '2018-06-11'
},
function (json) {
var Items = json.result.content;
$.each(json.result.content, function (index, value) {
str = '<tr><td width="41"style="word-wrap:break-word;word-break:break-all;">' + (index + 1) + '</td>' +
'<td width="72"style="word-wrap:break-word;word-break:break-all;">' + value.RISK_TYPE + '</td>' +
'<td width="90"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_UNIT + '</td>' +
'<td width="74"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_PLACE + '</td>' +
'<td width="130" style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_NAME + '</td>' +
'<td style="word-wrap:break-word;">' +
value.CONTENT_RISK_TODAY + '</td>' +
'<td width="99" style="word-wrap:break-word;word-break:break-all;">' + value.ON_SITE_NAME + '</td></tr>'
$('.tbl-body tbody').append(str);
$('.tbl-header tbody').append(str);
})
if (Items.length > 1) {
$('.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);
}
})
}
)
</script>
</body>
</html>