最近找工作找的头昏脑胀,突然发现自己之前是多么的幸福。。。。
闲下来,充实我的博客
滚动公告栏
滚动公告栏,之前在毕设中就实现过一次,现在翻出来重新写一次。
原理: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% -