js无缝滚动
2021-11-15 本文已影响0人
上海_前端_求内推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="tab-pane active" id="table_03">
<div class="lists_title2" style="line-height:34px;font-size:15px">
<span style="width:25%;">地址</span>
<span style="color:#00adff;width:25%;">自助机名称</span>
<span style="width:25%;">挂号人数</span>
<span style="color:#00adff;width:25%;">收费人数</span>
</div>
<div class="box-body" id="dome_z" style="height: 217.333px;overflow:hidden">
<div class="scroll" id="dome_z1">
<ul class="lists_bottom2">
<li style="clear:both;">
<span>玻璃房左</span>
<span style="color:#00adff;">宝庆挂号38</span>
<span style="text-align:center!important;">143</span>
<span style="color:#00adff;text-align:center!important;">24</span>
</li>
<li style="clear:both;">
<span>玻璃房左</span>
<span style="color:#00adff;">挂号充值32</span>
<span style="text-align:center!important;">154</span>
<span style="color:#00adff;text-align:center!important;">5</span>
</li>
<li style="clear:both;">
<span>玻璃房左</span>
<span style="color:#00adff;">挂号充值36</span>
<span style="text-align:center!important;">147</span>
<span style="color:#00adff;text-align:center!important;">18</span>
</li>
<li style="clear:both;">
<span>玻璃房左</span>
<span style="color:#00adff;">挂号充值35</span>
<span style="text-align:center!important;">117</span>
<span style="color:#00adff;text-align:center!important;">12</span>
</li>
<li style="clear:both;">
<span>玻璃房左</span>
<span style="color:#00adff;">挂号充值34</span>
<span style="text-align:center!important;">115</span>
<span style="color:#00adff;text-align:center!important;">11</span>
</li>
<li style="clear:both;">
<span>门诊一楼</span>
<span style="color:#00adff;">联空收费9</span>
<span style="text-align:center!important;">94</span>
<span style="color:#00adff;text-align:center!important;">103</span>
</li>
<li style="clear:both;">
<span>门诊一楼</span>
<span style="color:#00adff;">联空收费8</span>
<span style="text-align:center!important;">52</span>
<span style="color:#00adff;text-align:center!important;">110</span>
</li>
<li style="clear:both;">
<span>门诊一楼</span>
<span style="color:#00adff;">联空收费10</span>
<span style="text-align:center!important;">41</span>
<span style="color:#00adff;text-align:center!important;">193</span>
</li>
<li style="clear:both;">
<span>二楼收费</span>
<span style="color:#00adff;">联空收费19</span>
<span style="text-align:center!important;">5</span>
<span style="color:#00adff;text-align:center!important;">23</span>
</li>
<li style="clear:both;">
<span>三楼收费机</span>
<span style="color:#00adff;">联空收费21</span>
<span style="text-align:center!important;">26</span>
<span style="color:#00adff;text-align:center!important;">292</span>
</li>
<li style="clear:both;">
<span>三楼收费机</span>
<span style="color:#00adff;">联空收费22</span>
<span style="text-align:center!important;">5</span>
<span style="color:#00adff;text-align:center!important;">58</span>
</li>
<li style="clear:both;">
<span>三楼收费机</span>
<span style="color:#00adff;">联空收费20</span>
<span style="text-align:center!important;"></span>
<span style="color:#00adff;text-align:center!important;">1</span>
</li>
<li style="clear:both;">
<span>四楼挂号机</span>
<span style="color:#00adff;">挂号收费68</span>
<span style="text-align:center!important;">8</span>
<span style="color:#00adff;text-align:center!important;">118</span>
</li>
<li style="clear:both;">
<span>四楼挂号机</span>
<span style="color:#00adff;">挂号收费67</span>
<span style="text-align:center!important;">7</span>
<span style="color:#00adff;text-align:center!important;">112</span>
</li>
<li style="clear:both;">
<span>五楼签到机</span>
<span style="color:#00adff;">联空收费2</span>
<span style="text-align:center!important;">6</span>
<span style="color:#00adff;text-align:center!important;">13</span>
</li>
<li style="clear:both;">
<span>五楼签到机</span>
<span style="color:#00adff;">联空收费32</span>
<span style="text-align:center!important;">3</span>
<span style="color:#00adff;text-align:center!important;">20</span>
</li>
<li style="clear:both;">
<span>五楼自助机</span>
<span style="color:#00adff;">挂号收费54</span>
<span style="text-align:center!important;">20</span>
<span style="color:#00adff;text-align:center!important;">80</span>
</li>
<li style="clear:both;">
<span>五楼自助机</span>
<span style="color:#00adff;">挂号收费55</span>
<span style="text-align:center!important;">16</span>
<span style="color:#00adff;text-align:center!important;">63</span>
</li>
<li style="clear:both;">
<span>五楼自助机</span>
<span style="color:#00adff;">挂号收费70</span>
<span style="text-align:center!important;">13</span>
<span style="color:#00adff;text-align:center!important;">58</span>
</li>
<li style="clear:both;">
<span>急诊四楼</span>
<span style="color:#00adff;">挂号充值31</span>
<span style="text-align:center!important;">8</span>
<span style="color:#00adff;text-align:center!important;">17</span>
</li>
<li style="clear:both;">
<span>急诊四楼</span>
<span style="color:#00adff;">挂号收费52</span>
<span style="text-align:center!important;">4</span>
<span style="color:#00adff;text-align:center!important;">2</span>
</li>
<li style="clear:both;">
<span>三楼收费机</span>
<span style="color:#00adff;">联空收费23</span>
<span style="text-align:center!important;">1</span>
<span style="color:#00adff;text-align:center!important;"></span>
</li>
</ul>
</div>
<div id="dome_z2">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function () {
scrollTable("dome_z", "dome_z1", "dome_z2")
}
function scrollTable(dome, dome1, dome2) {
debugger
var dome = document.getElementById(dome);
var dome1 = document.getElementById(dome1);
var dome2 = document.getElementById(dome2);
var speed = 60; //设置向上滚动速度
dome2.innerHTML = dome1.innerHTML; //复制dome1为dome2
function moveTop() {
if (dome2.offsetTop - dome.scrollTop <= 0) { //当滚动至dome1与dome2交界时
dome.scrollTop -= dome1.offsetHeight //dome跳到最顶端
} else {
dome.scrollTop++
}
}
var MyMar = setInterval(moveTop, speed); //设置定时器
dome.onmouseover = function () {
clearInterval(MyMar);
} //鼠标移上时清除定时器达到滚动停止的目的
dome.onmouseout = function () {
MyMar = setInterval(moveTop, speed);
} //鼠标移开时重设定时器，继续滚动
}
</script>
