HTML滚动文字

原创 2017年05月08日 21:53:40

marquee 滚动文字标签

在一个页面中会有很多多媒体元素,比如动态文字、动态图象、音视频等,而最简单的就是天价滚动文字了,在HTML中,如果我们想要添加滚动文字,需要使用marquee标签。
我们先来看一下最简单的示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
    </head>

    <body style="background: black;padding: 20px;">
        <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom CSDN!</span></marquee>
    </body>
</html>

为了显示效果更明显,这里将页面背景设置为黑色,将滚动文字设置为白色,显示效果如图:
这里写图片描述
这样我们就实现了一个最简单的滚动文字,在滚动文字中还有一些属性用于控制滚动方向、滚动速度等,下面我们就来看一下几个比较常用的属性。

direction 滚动方向属性

默认情况下,文字从右向左滚动,实际应用中,我们可能需要改变方向,就可以通过该属性来设置,该属性可用值有:updownleftright,分别表示向上、向下、向左和向右滚动。
示例如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee direction="up">UP</marquee>
        <marquee direction="down">DOWN</marquee>
        <marquee direction="left">LEFT</marquee>
        <marquee direction="right">RIGHT</marquee>
    </body>

</html>

这里写图片描述

behavior 滚动方式属性

通过behavior 可以设置滚动方式,如往复运动等。behavior可用值有:scrollslidealternate,分别表示循环滚动、只滚动一次就停止和来回交替滚动。
示例如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee behavior="scroll">scroll</marquee>
        <marquee behavior="slide">slide</marquee>
        <marquee behavior="alternate">alternate</marquee>
    </body>

</html>

这里写图片描述

scrolldelay 滚动延迟属性与scrollamount 滚动速度属性

通过scrolldelay属性可以设置文字滚动的时间间隔。scrolldelay 的时间间隔单位是毫秒,这一时间间隔设置为滚动两步之间的时间间隔,如果时间过长,则会出现走走停停的效果。
scrollamount 用于设置滚动的步长。
示例如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee scrolldelay="800" scrollamount="100">Welcom CSDN!</marquee>
    </body>

</html>

这里写图片描述

loop 滚动循环属性

如果我们希望文字滚动几次后停止,就可以使用loop属性。

示例如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee loop="2">Welcom CSDN!</marquee>
    </body>

</html>
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/jianggujin/article/details/70832469

HTML5实现文字滚动

  • xzytl60937234
  • xzytl60937234
  • 2017-07-07 17:25:40
  • 1716

HTML滚动文字代码 marquee标签

 HTML滚动文字代码marquee标签 黑体" color="#008000"size="4" > 滚动文字 滚动文字...
  • beautifulsarah
  • beautifulsarah
  • 2017-02-09 14:36:42
  • 2558

HTML之marquee标签(滚动字幕(跑马灯))

再来学习一个标签---marquee,认识这个单词的人应该知道这个单词的意思是跑马灯。 但其实在H5中这个标签的语义是滚动字幕。 marquee标签并不是W3C官方推荐的标签,但是这个标签在各个浏览器...
  • CallMeQiuqiuqiu
  • CallMeQiuqiuqiu
  • 2017-01-13 10:44:11
  • 7088

html实现滚动文字

IT行业就业越来越难了,近几年就业率逐年下降                   公布时间:2016-10-15                         全国大学生毕业人数逐...
  • pangqiandou
  • pangqiandou
  • 2016-10-16 17:58:03
  • 2929

html中滚动文字效果|跑马灯效果

滚动文字 》》》属性 1) 滚动方向:direction=”up/down/left/right” 2) 滚动方式:behavior 三种方式scroll 循环滚动;slide 滚动一次后停止...
  • zbq41409
  • zbq41409
  • 2014-03-22 15:52:22
  • 1370

html滚动字基础知识及字体设置

欢迎查看滚动字的小属性 文字向下滚动,up是向上滚动 文字只滚动一次,scroll文字来回滚动出屏幕,alternate文字来回滚动不出屏幕(具体自己可以操作着试一下) 设置文字滚动的速度 可以设置滚...
  • sunny_girl_123
  • sunny_girl_123
  • 2016-08-31 09:51:51
  • 1300

HTML中实现文字各种滚动

  • 2011年09月07日 11:26
  • 2KB
  • 下载

文字循环滚动 LED屏效果

  • 2016年08月25日 14:49
  • 60KB
  • 下载

JQuery实现文字无缝滚动效果(Marquee插件)

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果。 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准。 官方演示,如下...
  • z69183787
  • z69183787
  • 2014-08-25 19:54:28
  • 36310

html5实现滚动文字

html5实现滚动文字 1 2 3 4 div class="custom-notice">    i ...
  • yang5726685
  • yang5726685
  • 2017-08-16 02:34:21
  • 468
收藏助手
不良信息举报
您举报文章:HTML滚动文字
举报原因:
原因补充:

(最多只允许输入30个字)