公告栏无间隙滚动

最新推荐文章于 2023-08-11 17:21:04 发布

原创最新推荐文章于 2023-08-11 17:21:04 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

JS滚动效果专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript实现公告栏无间隙滚动效果，包括代码解析和原理说明。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>公告栏无间隙滚动</title>
</head>
<body>
<div id="demo" style="overflow: hidden; width: 100%; height:152px; color:white; margin:0px;line-height:22px;position:relative;">
<div id="demo1">
·<a href="#" style="text-decoration:none">11111111</a><br>
·<a href="#" style="text-decoration:none">22222222</a><br>
·<a href="#" style="text-decoration:none">33333333</a><br>
·<a href="#" style="text-decoration:none">44444444</a><br>
·<a href="#" style="text-decoration:none">55555555</a><br>
·<a href="#" style="text-decoration:none">66666666</a><br>
·<a href="#" style="text-decoration:none">77777777</a><br>
·<a href="#" style="text-decoration:none">88888888</a><br>
·<a href="#" style="text-decoration:none">99999999</a><br>
·<a href="#" style="text-decoration:none">00000000</a><br>
</div>
<div id="demo2"></div>
</div>
<script>
var speed = 50
var _demo = document.getElementById("demo");
var _demo1 = document.getElementById("demo1");
var _demo2 = document.getElementById("demo2");
demo2.innerHTML = demo1.innerHTML
function Marquee() {
if (_demo2.offsetTop - _demo.scrollTop <= 0) {
_demo.scrollTop -= _demo1.offsetHeight
} else {
_demo.scrollTop++
}
}
var MyMar = setInterval(Marquee, speed)
_demo.onmouseover = function () { clearInterval(MyMar) }
_demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
</body>
</html>