html实现Marquee无缝衔接
以下是主要代码
<%--
Created by IntelliJ IDEA.
User: @lin
Date: 2018/11/22
Time: 10:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style type="text/css">
.table-head{padding-right:17px;background-color:#139ff7;color:#139ff7;}
.table-body{width:100%;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
.table-body{max-height:85%; min-height:0%;width:800px;margin:0 auto;}
</style>
</head>
<body>
<div id="divStyle" style="width: 100% ;height:98%;border-radius:10px" >
<div id="divba"class="table-head">
<table style="border-radius:10px">
<colgroup>
<col style="width: 80px;" />
<col />
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>内容</th>
</tr>
</thead>
</table>
</div>
<div id="demo" class="table-body" style="width:98%;overflow:hidden;">
<div id="demo1" style="text-align: center">
<table id="demo4" style="margin: auto">
<colgroup><col style="width: 80px;" /><col /></colgroup>
<tbody>
<% for (int i=0;i<35;i++){%>
<tr>
<td width="50%"> <%=i%></td>
<td width="50%">我只是用来测试的</td>
</tr>
</tbody>
<% }%>
</table>
</div>
<div id="demo2"></div>
</div>
<a style="height: 6px">
</a>
<a id="count1" class="count" style=";border: 2px ;overflow:auto;">
合計: <input type="text" style="border-radius:4px;"/>
</a>
</div>
<script type="text/javascript">
<!--
function $(Str){return document.getElementById(Str);}
var speed=30;
var demo=$("demo");
var demo1=$("demo1");
var demo2=$("demo2");
var demo4=$("demo4");
var divs=$("divStyle");
var divb=$("divba");
var count=$("count1");
function Marquee1(){
// if (divs.offsetHeight > document.body.clientHeight ){
// divs.offsetHeight=document.body.clientHeight;
// demo.offsetHeight = divs.offsetHeight - divb.offsetHeight -count.offsetHeight;}
// console.log(document.body.clientHeight);
// console.log(divs.offsetHeight);
// console.log(demo.offsetHeight);
if(demo.offsetHeight < demo4.offsetHeight){
demo2.innerHTML=demo1.innerHTML;
}
if(demo2.offsetTop-demo.scrollTop<=0){
demo.scrollTop-=demo1.offsetHeight;
}
else{
demo.scrollTop++;
console.log(demo.scrollTop)
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
//-->
</script>
</body>
</html>