js实现滚动功能---公告栏

最新推荐文章于 2024-05-31 09:43:57 发布

polmJ

最新推荐文章于 2024-05-31 09:43:57 发布

阅读量1.4w

点赞数 5

分类专栏：前端文章标签：滚动公告栏循环显示 javaScript

本文链接：https://blog.csdn.net/belove_lucy/article/details/79486956

版权

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

滚动公告栏

滚动公告栏，之前在毕设中就实现过一次，现在翻出来重新写一次。
原理：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% -

最低0.47元/天解锁文章

polmJ

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
8
评论
js实现滚动功能---公告栏

最近找工作找的头昏脑胀，突然发现自己之前是多么的幸福。。。。闲下来，充实我的博客滚动公告栏滚动公告栏，之前在毕设中就实现过一次，现在翻出来重新写一次。原理：div公告栏（#part2）设置具体宽高，并设置溢出隐藏，这个地方就是我们公告展示的地方。在公告栏中有两个div，一个用来放置我们的公告内容，另一个用来填补当公告一滚动完时，中间空出来的一小块空间。注：红色为公告栏，...
复制链接

扫一扫

专栏目录