废话不多说,直接代码copy进去运行就知道了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.page_1366_768{
width: 1366px;
height: 768px;
margin: 0 auto;
background-color: #009;
}
body{
margin: 0;
padding: 0;
background-color: #900;
font-family:'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
font-size:24px;
}
.head{
background-color: #14b9d6;
color: #fff;
}
.h1{
display: inline-block;
font-size: 36px;
margin:0px;
padding:20px 35px;
}
.h_right{
float: right;
display: inline-block;
}
.h_right .date{
display: inline-block;
font-size: 20px;
font-weight: bold;
line-height: 25px;
padding:18px 0;
text-align: right;
}
.h_right .time{
font-size:42px;
font-weight: bold;
float: right;
padding:16px 35px;
}
.content{
width:100%;
background-color: #fff;
}
.content table{
width: 100%;
border-collapse: collapse;
}
.content table th{
color: #fff;
border-top: 1px solid #7be2f4;
background-color: #038fa7;
}
.content table td,
.content table th{
text-align: center;
line-height:72px;
}
.content table tr{
border-bottom: 1px solid #bfe4ea;
}
.content table tr:nth-of-type(odd){
background-color: #def8fc;
}
.c_f00{
color: #f00;
}
.c_00f{
color: #14b9d6;
}
ul,ul li{
list-style: none;
margin: 0;
}
.info{
font-size:24px;
overflow:hidden;
height:144px;
}
.info ul li{
line-height:2;
text-align: center;
}
</style>
<body>
<div class="page_1366_768">
<div class="head">
<h1 class="h1">南京卷烟厂月台排队信息</h1>
<div class="h_right">
<span class="date">2019/03/26<br />星期三</span>
<div class="time">18 : 48 : 36</div>
</div>
</div>
<div class="content">
<table>
<tr>
<th>序号</th>
<th>车牌号</th>
<th>驾驶号</th>
<th>联系电话</th>
<th>月台</th>
<th>作业</th>
<th>状态</th>
<th>入园时间</th>
</tr>
<tr>
<td>1</td>
<td>苏A16828</td>
<td>张南风</td>
<td>18649604646</td>
<td>C-1号</td>
<td>发货</td>
<td>准备作业</td>
<td>09:06</td>
</tr>
<tr>
<td>2</td>
<td>苏A56515</td>
<td>苏清枫</td>
<td>18646658899</td>
<td>C-2号</td>
<td>发货</td>
<td>开始作业</td>
<td>09:22</td>
</tr>
<tr>
<td>3</td>
<td>苏A52648</td>
<td>张志强</td>
<td>18655895858</td>
<td>C-3号</td>
<td>发货</td>
<td><span class="c_f00">等待作业</span></td>
<td>09:06</td>
</tr>
<tr>
<td>4</td>
<td>苏A16828</td>
<td>张华扬</td>
<td>18649604896</td>
<td>C-4号</td>
<td>发货</td>
<td>开始作业</td>
<td>08:34</td>
</tr>
<tr>
<td>5</td>
<td>苏A56355</td>
<td>李天华</td>
<td>18955685594</td>
<td>XH-1号</td>
<td><span class="style_c c_00f">卸货</span></td>
<td>准备作业</td>
<td>08:44</td>
</tr>
<tr>
<td>6</td>
<td>苏A56795</td>
<td>李华阳</td>
<td>18955686364</td>
<td>XH-2号</td>
<td><span class="style_c c_00f">卸货</span></td>
<td>准备作业</td>
<td>08:59</td>
</tr>
</table>
<div class="info" id="info">
<ul id="list1" onMouseOut="Up()" onMouseOver="Stop()">
<li>请<span class="c_00f"> 苏AE6554 </span>到<span class="c_f00"> C-1号 </span>月台进行 发货 作业!</li>
<li>请<span class="c_00f"> 苏AE6889 </span>到<span class="c_f00"> XH-2号 </span>月台进行<span class="c_00f"> 卸货 </span>作业!</li>
<li>请<span class="c_00f"> 苏A55939 </span>到<span class="c_f00"> XH-2号 </span>月台进行<span class="c_00f"> 卸货 </span>作业!</li>
</ul>
<ul id="list2"></ul>
</div>
</div>
<script type="text/javascript">
var info=document.getElementById("info");
var list1=document.getElementById("list1");
var list2=document.getElementById("list2");
var speed=50;
list2.innerHTML=list1.innerHTML;
function ScrollUp(){
if( info.scrollTop>=list1.scrollHeight){
info.scrollTop=0;
}else
info.scrollTop++;
}
var i=setInterval(ScrollUp,speed);
function Stop(){
clearInterval(i);
}
function Up(){
i=setInterval("ScrollUp()",speed);
}
</script>
</div>
</body>
</html>