公告通知上下滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公告滚动</title>
<style type="text/css">
.case {
position: absolute;
width: 800px;
height: 30px;
overflow: hidden;
left: calc(50% - 400px);
top: 150px;
}
.case .part1 {
float: left;
width: 5%;
height: 30px;
}
.case .part1 img {
width: 20px;
height: 20px;
float: right;
margin-top: 5px;
}
.case .part2 {
float: left;
width: 93%;
height: 30px;
text-indent: 1em;
overflow: hidden;
}
#part2 ul {
width: 100%;
height: auto;
list-style: none;
padding: 0;
margin: 0;
}
#part2 ul li {
width: 100%;
height: 30px;
font-size: 16px;
line-height: 30px;
color: #575757;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="case">
<div class="part1">
<img src="../img/notice.png">//一个喇叭的图片
</div>
<div class="part2" id="part2">
<div id="scroll1">
<ul>
<li>不要被别人表现出来的毫不费力所迷惑，你要知道，那些信手拈来的东西，一定有拼尽全力作为支撑。</li>
<li>这个世界上，天才好像真的没有那么多。</li>
<li>而我希望，自己也可以在别人看不见的地方不动声色的努力，在关键时刻出其不意的傲娇绽放。</li>
<li>这个年纪我不在将就。</li>
</ul>
</div>
<div id="scroll2"></div>
</div>
</div>
<script type="text/javascript">
var PartArea = document.getElementById('part2');
var Scroll1 = document.getElementById('scroll1');
var Scroll2 = document.getElementById('scroll2');
Scroll2.innerHTML = Scroll1.innerHTML;
function roll() {
if(Scroll2.offsetHeight - PartArea.scrollTop <= 0) {
PartArea.scrollTop -= Scroll1.offsetHeight;
} else {
PartArea.scrollTop++;
}
}
var StopRoll = setInterval(roll, 60);
PartArea.onmouseover = function () {
clearInterval(StopRoll);
}
PartArea.onmouseout = function () {
StopRoll = setInterval(roll, 60);
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通