<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
/*样式设置*/
body {
margin: 0;
}
#scroll-box {
width: 200px;
height: 22px;
background: red;
overflow: hidden;
line-height: 22px;
}
#scroll-box ul {
margin: 0
}
#scroll-box li {
color: #fff
}
</style>
</head>
<body>
<!-- 滚动内容部分 -->
<div id="scroll-box">
<ul>
<li>第一条公告</li>
<li>第二条公告</li>
<li>第三条公告</li>
<li>第四条公告</li>
<li>第五条公告</li>
<li>第六条公告</li>
<li>第七条公告</li>
<li>第八条公告</li>
<li>第九条公告</li>
<li>第十条公告</li>
</ul>
<ul></ul>
</div>
<!-- js部分 -->
<script type="text/javascript">
var box = document.getElementById('scroll-box')
var parent = document.getElementsByTagName('ul')[0]
var parent2 = document.getElementsByTagName('ul')[1]
parent2.innerHTML = parent.innerHTML
/*启动定时器*/
var timer = setInterval(autoScrollLine, 30)
/*单行向上滚动效果*/
function autoScrollLine() {
/*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0
否则就每隔30毫秒向上滚动1px*/
if (box.scrollTop >= parent.offsetHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
/*判断滚动的距离刚好为一条公告的高度时停掉定时器，
隔1s之后重新启动定时器即可实现公告滚动停留效果 */
if (box.scrollTop % box.offsetHeight == 0) {
clearInterval(timer)
setTimeout(() => {
timer = setInterval(autoScrollLine, 30)
}, 1000)
}
}
</script>
</body>
</html>
觉得不错麻烦关注点个赞
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
