最近找工作找的头昏脑胀,突然发现自己之前是多么的幸福。。。。
闲下来,充实我的博客

滚动公告栏

滚动公告栏,之前在毕设中就实现过一次,现在翻出来重新写一次。

原理:div公告栏(#part2)设置具体宽高,并设置溢出隐藏,这个地方就是我们公告展示的地方。在公告栏中有两个div,一个用来放置我们的公告内容,另一个用来填补当公告一滚动完时,中间空出来的一小块空间。

注:红色为公告栏,棕色为公告一。

公告循环滚动是当公告一完全走完公告栏时,再将公告栏的scrollTop重新置0,从而使公告一重新再次滚动。而当公告一最后一条公告开始从公告栏向上滚动时,由于此时并没有重置srcollTop,将会有一段为空白(就是图中绿色部分),所以需要公告二暂时填充一会。

代码如下:
<!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>
**可运行代码

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信