无缝隙滚动最后的效果图
以下为完整的代码：
<div id="pdiv0" style="border: 1px solid #000; 500px; height: 192px; overflow: hidden;
position: relative">
<div id="pdiv1">
<!-- cellpadding="0" cellspacing="0" 不能忘记，不然会滚到后来出现不对齐 -->
<table cellpadding="0" cellspacing="0">
<tr height="24">
<td>
1
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
2
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
3
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
4
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
5
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
6
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
7
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
8
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
9
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
10
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
11
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
12
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
13
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
14
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
15
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
18
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
19
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
20
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
21
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
22
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
23
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
24
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
25
</td>
<td>
张三
</td>
</tr>
<tr height="24">
<td>
26
</td>
<td>
张三
</td>
</tr>
</table>
</div>
<div id="pdiv2">
</div>
</div>
<script>
document.getElementById("pdiv2").innerHTML = document.getElementById("pdiv1").innerHTML; //克隆
var t = setInterval(move, 1000);
document.getElementById("pdiv0").onmouseover = function () { clearInterval(t); }
document.getElementById("pdiv0").onmouseout = function () { t = setInterval(move, 1000); }
function move() {
//document.getElementById("pdiv2").offsetTop document.getElementById("pdiv1").offsetHeight这2个值是固定不变的
//当滚动至demo1与demo2交界时
if (document.getElementById("pdiv2").offsetTop - document.getElementById("pdiv0").scrollTop <= 0) {
document.getElementById("pdiv0").scrollTop = 24;//tr的高度
}
else {
document.getElementById("pdiv0").scrollTop = document.getElementById("pdiv0").scrollTop + 24;
}
}
</script>