HTML垂直翻页公告

最新推荐文章于 2023-01-11 14:49:55 发布

Jack丶Fan

最新推荐文章于 2023-01-11 14:49:55 发布

阅读量5.2k

点赞数 4

分类专栏： HTML JavaScript 文章标签： html javascript

本文链接：https://blog.csdn.net/DeveloperFanyl/article/details/52390320

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

0 篇文章 0 订阅

订阅专栏

发现

今天看到了一个Android的自定义View垂直翻页公告，感觉挺好的，运行的动图让我搬过来了，顺便感谢一下写这个Android公告的作者的分享。

HTML垂直翻页公告

由于这两天在做一个聊天室的项目，看到这个之后，决定也在自己项目里加一个这样的公告展示，说做就做，开始动手。

要说在web端做文字滚动的跑马灯效果，第一个想到的就是HTML的marquee标签了。

学习

首先来了解一下marquee标签。

标签写法：<marquee> ... </marquee>

属性：

1. direction用来表示跑马灯滚动的方向，分别为left、right、up、down，如果没有设置默认为left;
2. behavior用来表示跑马灯滚动的方式，scroll表示连续滚动，slide表示滑动一次，alternate表示往返滚动;
3. loop用来表示跑马灯循环的次数，值为正整数，如果不设置默认为无限循环;
4. scrollamount用来表示跑马灯运动的速度，值为正整数，默认为6;
5. scrolldelay用来表示跑马灯停顿的时间，值为正整数，默认为0;
6. align用来表示跑马灯元素内容的垂直对齐方式，分别为top、middle、bottom，如果没有设置默认为middle;
7. bgcolor用来表示跑马灯运动区域的背景色，默认为白色;
8. height、width用来表示跑马灯运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度;
9. hspace、vspace用来表示跑马灯元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素;
10. onmouseover=this.stop() onmouseout=this.start()用来表示跑马灯当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

然后动手做一个垂直滚动的marquee标签，并为它设置一些样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background: gray;height: 25px;color:#fff;border-radius: 8px;width: 300px;margin: 100px auto;">
        <marquee direction="up" onMouseOut="this.start()" onMouseOver="this.stop()" scrollamount="3" style="height: inherit;text-align: center;">
            <ul style="list-style: none;">
                <li>《七律·长征》·毛泽东</li>
                <li>红军不怕远征难，</li>
                <li>万水千山只等闲。</li>
                <li>五岭逶迤腾细浪，</li>
                <li>乌蒙磅礴走泥丸。</li>
                <li>金沙水拍云崖暖，</li>
                <li>大渡桥横铁索寒。</li>
                <li>更喜岷山千里雪，</li>
                <li>三军过后尽开颜。</li>
            </ul>
        </marquee>
        <img src="https://img-blog.csdn.net/20160831234909712" style="position: relative;width: 20px;float: left;top: -25px;left: 10px;" />
    </div>
</body>
</html>

最后得到的效果如下图：

HTML垂直翻页公告

探究

仔细看，是不是有哪里不对。原来的垂直翻页效果并不是像现在这样连续滚动的，它是有一个延迟的效果，内容会一条一条显示并有短暂的停顿。知道问题在哪了，我们开始修改现有的代码。

由于marquee是不被W3C承认的标签，再加上marquee标签现在用的是越来越少了，所以这种跑马灯滚动效果的做法大多也都改用javascript来实现了，那我们也着手用javascript实现我们想要的效果来替换掉marquee标签。

下面就是用javascript来实现的例子，javascript中speed用来表示每一次内容改变时的速度，值越小速度越快，delay用来表示每一次内容显示时的延迟时间，值越大表示每两次变换等待的时间越长，timeout用来记录当前定时器，以便在需要的时候可以清除定时器，比如在鼠标悬停或者离开时增加暂停与恢复的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul {
            padding-right: 0px;
            padding-left: 0px;
            padding-bottom: 0px;
            margin: 0px;
            padding-top: 0px
        }
    </style>
</head>
<body>
<div style="background: gray;color:#fff;border-radius: 8px;width: 300px;margin: 100px auto;">
    <div id="scrollBody" style="height: 25px;line-height:25px;overflow-y:hidden;margin-left: 30px;text-align: center;">
        <ul style="list-style: none;">
            <li>《七律·长征》·毛泽东</li>
            <li>红军不怕远征难，</li>
            <li>万水千山只等闲。</li>
            <li>五岭逶迤腾细浪，</li>
            <li>乌蒙磅礴走泥丸。</li>
            <li>金沙水拍云崖暖，</li>
            <li>大渡桥横铁索寒。</li>
            <li>更喜岷山千里雪，</li>
            <li>三军过后尽开颜。</li>
        </ul>
        <br>
    </div>
    <img src="https://img-blog.csdn.net/20160831234909712" style="position: relative;width: 20px;float: left;top: -25px;left: 10px;" />
</div>
<script>
    function $(id)
    {
        return document.getElementById(id);
    }

    var speed = 10;
    var delay = 1500;
    var timeout = 0;
    function scroll()
    {
        if($('scrollBody').scrollTop == $('scrollBody').scrollHeight - 25)
        {
            $('scrollBody').scrollTop = 0;
            $('scrollBody').scrollTop ++ ;
            timeout = setTimeout('scroll()', delay);

        }else if ($('scrollBody').scrollTop % 25 == 0)
        {
            $('scrollBody').scrollTop ++ ;
            timeout = setTimeout('scroll()', delay);
        }else
        {
            $('scrollBody').scrollTop ++ ;
            timeout = setTimeout('scroll()', speed);
        }
    }
    scroll();
</script>
</body>
</html>

同样，得到的效果如下图。

HTML垂直翻页公告

总结

用javascript实现了的垂直翻页，同时我们也加上了延迟的效果，最后的效果是不是很棒，实现的关键在于理解scrollTop（向上滚动的距离）、scrollHeight（可滚动区域的高度）还有定时器的用法，这方面的讲解网上有很多，大同小异，需要的话可以自行去搜索看看！

查看原文

Jack丶Fan

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
HTML垂直翻页公告

发现今天看到了一个Android的自定义View垂直翻页公告，感觉挺好的，运行的动图让我搬过来了，顺便感谢一下写这个Android公告的作者的分享。由于这两天在做一个聊天室的项目，看到这个之后，决定也在自己项目里加一个这样的公告展示，说做就做，开始动手。要说在web端做文字滚动的跑马灯效果，第一个想到的就是HTML的marquee标签了。学习首先来了解一下marquee标签。标签写法：<marque
复制链接

扫一扫