HTML垂直翻页公告

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/DeveloperFanyl/article/details/52390320

发现

今天看到了一个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(可滚动区域的高度)还有定时器的用法,这方面的讲解网上有很多,大同小异,需要的话可以自行去搜索看看!

查看原文

展开阅读全文

没有更多推荐了,返回首页