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>
版权声明:本文为博主原创文章,转载请标明出处。

HTML滚动文字代码 marquee标签

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

HTML5实现文字滚动

  • xzytl60937234
  • xzytl60937234
  • 2017年07月07日 17:25
  • 756

html实现滚动文字

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

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

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

滚动代码Marquee详解(html滚动显示文字)

Marquee 在装修中主要制作滚动效果  先说一下Marquee的参数,温习一下  Marquee 标签常用的属性:  align  设定标签内容的对齐方式  ab...
  • u012041238
  • u012041238
  • 2014年03月14日 14:28
  • 2375

html中的横向广告滚动字幕

html: 加粉神器值得你拥有!得粉丝者,得微信天下!!! js: var speed=50; marquePic2.inne...
  • qq_30552993
  • qq_30552993
  • 2016年01月13日 17:29
  • 2149

HTML中实现文字各种滚动

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

HTML中让图片滚动的<marquee>标签的使用方法

实例:  
  • wendylover
  • wendylover
  • 2012年11月24日 23:36
  • 16301

marquee标签无限上下滚动

marquee标签无限上下滚动
  • u014796999
  • u014796999
  • 2016年12月14日 13:14
  • 1945

html文字滚动效果演示

文字滚动演示 自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧 自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧 自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧自...
  • hai7425
  • hai7425
  • 2017年05月24日 11:07
  • 298
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML滚动文字
举报原因:
原因补充:

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