js实现公告自动滚动
作者：七彩猫猫虫
这篇文章主要为大家详细介绍了js实现公告自动滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现公告自动滚动的具体代码，供大家参考，具体内容如下
html
<div class="test003"> <div class="test004"> <div class="testTop"><span class="span1">姓名</span> <span class="span2">状态</span> <span class="span3">查询积分分数</span> </div> <div id="box"> <ul id="list"> <li><span class="span1">173****3856</span> <span class="span2">在11:36查询</span> <span class="span3">108分</span> <li> <li><span class="span1">139****1926</span> <span class="span2">在11:49查询</span> <span class="span3">120分</span> <li> <li><span class="span1">137****2575</span> <span class="span2">在09:59查询</span> <span class="span3">110分</span> <li> <li><span class="span1">181****6973</span> <span class="span2">在11:08查询</span> <span class="span3">120分</span> <li> <li><span class="span1">133****1728</span> <span class="span2">在13:10查询</span> <span class="span3">119分</span> <li> <li><span class="span1">186****2048</span> <span class="span2">在12:37查询</span> <span class="span3">114分</span> <li> <li><span class="span1">153****0658</span> <span class="span2">在10:22查询</span> <span class="span3">120分</span> <li> <li><span class="span1">150****3880</span> <span class="span2">在12:24查询</span> <span class="span3">120分</span> <li> <li><span class="span1">189****5792</span> <span class="span2">在11:00查询</span> <span class="span3">105分</span> <li> <li><span class="span1">157****3676</span> <span class="span2">在14:55查询</span> <span class="span3">192分</span> <li> <li><span class="span1">150****3811</span> <span class="span2">在14:25查询</span> <span class="span3">108分</span> <li> <li><span class="span1">173****4713</span> <span class="span2">在15:21查询</span> <span class="span3">109分</span> <li> <li><span class="span1">159****7114</span> <span class="span2">在14:40查询</span> <span class="span3">106分</span> <li> <li><span class="span1">180****2836</span> <span class="span2">在15:35查询</span> <span class="span3">147分</span> <li> <li><span class="span1">187****3546</span> <span class="span2">在14:17查询</span> <span class="span3">120分</span> <li> </ul> </div> </div> </div>
css
<style type="text/css">
.test001 {
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
font-weight: bold;
font-size: 17px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.test002 {
margin-top: 15px;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 21px;
display: flex;
justify-content: center;
align-items: center;
}
.test003 {
margin-top: 15px;
width: 100%;
/* text-align: center; */
/* font-weight: bold; */
/* font-size: 21px; */
display: flex;
justify-content: center;
/* border: solid 1px; */
flex-direction: column;
align-items: center;
}
.test004 {
/* margin-top: 15px; */
width: 90%;
/* text-align: center; */
/* font-weight: bold; */
/* font-size: 21px; */
display: flex;
justify-content: center;
border: solid 1px;
flex-direction: column;
align-items: center;
}
.testTop {
width: 90%;
font-size: 14px;
height: 30px;
display: block;
font-weight: bold;
padding-left: 20px;
padding-top: 15px;
}
.testTop span {
margin-right: 75px;
}
.testTop .span2 {
margin-right: 65px;
}
#box {
width: 90%;
height: 250px;
line-height: 2em;
/* background-color: skyblue; */
margin-top: 15px;
/* margin: 100px auto; */
padding: 0 0px;
overflow: hidden;
}
#list li {
margin-top: 10px;
list-style: none;
}
#list span {
margin-right: 30px;
font-size: 14px;
display: inline-block;
overflow: hidden;
text-align: center;
}
#list .span1 {
width: 80px;
}
#list .span2 {
margin-right: 40px;
width: 80px;
}
#list .span3 {
width: 50px;
/* margin-right: 50px; */
/* text-align: left; */
/* border: 1px solid black; */
}
/* #list a:hover {
color: orangered;
text-decoration: underline;
} */
</style>js
<script>
var box = document.getElementById('box')
var list = document.getElementById('list')
console.log(box, 'box')
//复制一遍文档
var content = list.innerHTML;
list.innerHTML += content;
var time = 30;
var timer = setInterval(up, time);
function up() {
//滚上去的内容大于ul内容高度的一半，重置高度 0
if (box.scrollTop > (list.offsetHeight >> 1)) {
box.scrollTop = 0
} else {
box.scrollTop++;
}
}
//鼠标移入暂停--清除定时器
// box.onmouseover = function () {
// clearInterval(timer)
// }
///鼠标移出继续--启动定时器
box.onmouseout = function() {
timer = setInterval(up, time);
}
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。