公告栏无间隙滚动

来源：互联网发布：mysql if then else 编辑：程序博客网时间：2024/05/01 14:22

<!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>

0 0