精华内容
下载资源
问答
  • HTML滚动文字

    万次阅读 多人点赞 2017-05-08 21:53:40
    在一个页面中会有很多多媒体元素,比如动态文字、动态图象、音视频等,而最简单的就是天价滚动文字了,在HTML中,如果我们想要添加滚动文字,需要使用marquee标签

    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标签

    千次阅读 2017-02-09 14:36:42
    HTML滚动文字代码marquee标签 黑体" color="#008000"size="4" > 滚动文字 > 滚动文字 > 滚动文字 /> marquee 参数: BGColor:滚动文本框的背景...
    

    HTML滚动文字代码marquee标签

    <marquee style="WIDTH: 388px; HEIGHT: 200px"scrollamount="2" direction="up" >

    <div align="left" ><br />

    </div >

    <center ><font face="黑体" color="#008000"size="4" ></font ></center >

    <div align="left" ><br />

    </div >

    <center >

    <p ><font color="#ff6600"size="4" >滚动文字</font></p >

    <p ><font color="#ff4500"size="4" >滚动文字</font></p >

    <p ><font color="#ff3300"size="4" >滚动文字</font><br />

    <br />

    </p >

    </marquee >

    marquee 参数:

    BGColor:滚动文本框的背景颜色。

    Direction:滚动方向设置,可选择Left(从右到左)、Rightup(从下到上)和down(从上到下)

    scrolldelay:每轮滚动之间的延迟时间,数字越大滚动越慢。

    scrollamount:一次滚动总的时间量,数字越小滚动越慢。

    Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(滑入,单次滚动)、Alternate(来回滚动)。

    Align:文字的对齐方式设置,可选择Middle(居中)Bottom(居下)还是Top(居上)

    Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是inPercent(按百分比)

    Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是inPercent(按百分比)

    loop:滚动次数,默认为infinite(无限)

    hspacevspace:前后、上下的空行。

    1.建立第一个滚动字幕:

    代码如:

    <marquee scrollAmount=2 width=300>欢迎来到魔人牛牛新浪博客!</marquee>

    效果如:

    欢迎来到魔人牛牛新浪博客!

    2.各参数详解:

    a)scrollAmount。表示速度,值越大速度越快。取整数,默认为6,建议设为13比较好。

    b)widthheight,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

    c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有rightdownup。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

    d)scrollDelay,这也是用来控制速度的,取整数,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

    e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)slide(幻灯片效果,指的是滚动一次,然后停止滚动)

    3.实例:

    a)给滚动字幕加超链接。

    这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***></a>就可以了。

    代码如:

    <marquee scrollAmount=2 width=300><ahref=http://www.sina.com.cn/>新浪首页</a></marquee>

    效果如:

    新浪首页

    点击“新浪首页”就可以进入了:

    b)当鼠标停留在文字上,文字停止滚动。

    代码如:

    <marquee scrollAmount=2 width=300 οnmοuseοver=stop() οnmοuseοut=start()>欢迎来到魔人牛牛新浪博客!</marquee>

    效果如:

    欢迎来到魔人牛牛新浪博客!

    c)交替效果。

    代码如:

    <marquee scrollAmount=2 width=99behavior=alternate>欢迎来到魔人牛牛新浪博客!</marquee>

    效果如:

    欢迎来到魔人牛牛新浪博客!

    d)多行文本向上滚动。

    代码如:

    <marquee scrollAmount=2 width=300 height=160 direction=up>·您好!<br>·欢迎来到魔人牛牛新浪博客!<br>·这是一段多行文本向上滚动代码。<p>·<a href=http://www.sina.com.cn/>新浪首页</a></marquee>

    效果如:

    ·您好!

    ·欢迎来到魔人牛牛新浪博客!

    ·这是一段多行文本向上滚动代码。

    ·新浪首页

        如果网页经过了FrontPage编辑,保存之后,只能滚动一行,这时候发现原来的代码顺序已经变了。解决的办法是,找出原来的代码,把它嵌入到JavaScriptdocument.write中即可,上述代码写为:

    <script>document.write('<marquee scrollAmount=2width=300 height=160 direction=up>·您好!<br>·欢迎来到魔人牛牛新浪博客!<br>·这是一段多行文本向上滚动代码。<p>·<ahref=http://www.sina.com.cn/>新浪首页</a></marquee>')</script>

    e) 用样式表来控制改变滚动字幕的颜色。

    代码如:

    <marquee scrollAmount=2 width=300><astyle=color:CC6600>欢迎来到魔人牛牛新浪博客</a></marquee>

    欢迎来到魔人牛牛新浪博客!

    图片滚动

    <img src=相对路径/文件名>的语句。并且要注意图片名不要中文,要注意区分英文大小写。

    图片做超链接

    <a href=></a><img>包围,并且img必须设border=0,否则图片会出现蓝框。

    正确的例子如:

    <a href=http://www.sina.com.cn/><imgsrc=../../j/01.jpg border=0></a>

    其中a href=表示超链接,这是最常用的。练习的方法也很简单,就是平时用FPDW做网页的时候,要多查看源代码。

    多张图片排列滚动

    通常图片和图片之间用<br>(回行)<p style=margin-top:9>(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版,然后把这个表格的所有语句也加入到marquee中,让这个表格来滚动。

    代码如:

    <script>document.write('<marquee scrollAmount=2width=340 height=160 direction=up οnmοuseοver=stop()οnmοuseοut=start()><a href=http://www.sina.com.cn/><imgsrc=../../j/01.jpg border=0></a></marquee>')</script>

    展开全文
  • html滚动文字(marquee标签)

    千次阅读 2018-09-12 15:36:05
    doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot; ng-app&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta ...
    <!doctype html>
    <html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Marquee</title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </head>
    <body>
    
    <marquee style=" HEIGHT: 30px; background-color: papayawhip" scrollamount="2" direction="up" Align="Middle" >
        <div style="text-align: center">
            <p>1一大堆文字飘过~</p>
            <p>2一大堆文字飘过~</p>
            <p>3一大堆文字飘过~</p>
            <p>4一大堆文字飘过~</p>
            <p>5一大堆文字飘过~</p>
        </div>
    </marquee >
    
    <!--
    marquee 参数:
    BGColor:滚动文本框的背景颜色。
    Direction:滚动方向设置,可选择Left、Right、up和down。
    scrolldelay:每轮滚动之间的延迟时间,越大越慢。
    scrollamount:一次滚动总的时间量,数字越小滚动越慢。
    Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
    Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
    Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
    Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
    loop:滚动次数。默认为infinite
    hspace、vspace:前后、上下的空行。
    onMouseOver='this.stop()' 鼠标放上去则暂停
    onMouseOut='this.start()' 鼠标移开继续滚动
    -->
    </body>
    </html>

    这里写图片描述

    展开全文
  • marquee标签_html滚动文字

    千次阅读 2018-03-05 19:11:24
    marquee标签可以让我们在网页中编写的文字动起来,不论是上下滚动还是左右滚动都可以通过marquee标签中的属性来设置。语法:﹤marquee﹥需要被滚动文字﹤/marquee﹥:默认下marquee标签中的内容是从左到右滚动的,...

    marquee标签可以让我们在网页中编写的文字动起来,不论是上下滚动还是左右滚动都可以通过marquee标签中的属性来设置。语法:﹤marquee﹥需要被滚动的文字﹤/marquee﹥:

    默认下marquee标签中的内容是从左到右滚动的,当然也可以通过marquee标签中的属性来控制不同的滚动方式。marquee标签是块级元素,这就说明它自带了宽高属性,通过CSS样式也能为它规定宽高,同时还能设置标签里面的字体大小、颜色、行高等效果。

    marquee标签的属性设置

    1. marquee width="像素值" :设置marquee标签的宽度;
    2. marquee height="像素值" :设置marquee标签的高度;
    3. marquee hapace="像素值" :设置marquee标签的水平间距;
    4. marquee vspace="像素值" :设置marquee标签的垂直间距;
    5. marquee bgcolor="颜色值":设置marquee标签的背景颜色;
    6. marquee style="规定样式":设置marquee标签的CSS样式;

    direction:设置文字的滚动方向

    1. marquee direction="up"  :从下往上滚动;
    2. marquee direction="down" :从上往下滚动;
    3. marquee direction="left" :从右往左滚动;默认值;
    4. marquee direction="right":从左往右滚动;

    behavior:设置文字的滚动方式

    1. marquee behavior="side" :只滚动一次就停止;
    2. marquee behavior="srcoll":循环滚动;默认值;
    3. marquee behavior="alternate":来回滚动;如果让文字上下来回滚动,需给marquee元素一个高度;

    scrollamount:设置文字的滚动速度

    通过scrollamount属性设置滚动文字速度,属性值以数字代表,数值越大滚动越快,反之越慢。

    1. marquee scrollamount="1" :非常慢;
    2. marquee scrollamount="5" :速度一般;
    3. marquee scrollamount="10":速度较快;
    4. marquee scrollamount="80":非常快;

    scrolldelay:设置滚动文字延迟时间

    通过scrollamount属性设置滚动文字的延迟时间,属性值以数字代表,数值越大延迟越长,反之越短。

    1. marquee scrollamount="10" :延迟较短;
    2. marquee scrollamount="50" :延迟一般;
    3. marquee scrollamount="100":延迟较长;

    loop:设置滚动文字循环次数

    默认下滚动文字会无限循环的滚动,通过loop属性可以让文字在滚动完规定的次数后停止滚动。

    1. marquee loop="-1":无限循环滚动,默认值;
    2. marquee loop="5" :文字在滚动完5次后停止滚动;
    3. marquee loop="50":文字在滚动完50次后停止滚动;

    通过以上属性,使用marquee标签来设置一个完整的滚动元素,其中宽度为600像素;高度40像素;背景颜色草绿色;滚动文字从左往右;滚动方式默认循环;滚动速度5;marquee元素垂直间距上下各10像素;代码如下:

    ﹤marquee width="600px" height="40px" bgcolor="#99FF66" direction="right" scrollamount="5" vspace="10"﹥ html滚动文字 ﹤/marquee﹥

    展开全文
  • html滚动文字代码!

    2013-09-26 15:51:46
    文字滚动一般用的是这个标签哈、标签里面的放的就是你的文字内容、这个标签有下面几个参数、我给你说一下、你可以选几个你用的着的、 direction 表示滚动的方向,值可以是left,right,up,down,默认为left ...
  • 2,html滚动字体。不间断。(div层和方法来控制) <!------------------------------------ à <tr><td height=5></td></tr> <tr><td> ; WIDTH: 180px; HEIGHT: 185px">   ·青浦...
  • HTML——设置滚动文字

    2020-05-06 09:19:16
    滚动文字标签——marquee 使用标签可以将文字设置为动态滚动的效果。 语法格式: <marquee>滚动文字</marquee> 也可以在标签之间设置文字的字体、颜色等。 滚动方向属性——direction 语法格式: ...
  • HTML设置滚动文字

    千次阅读 2018-11-12 15:25:34
    滚动文字&lt;/marquee&gt; 滚动方向属性——direction:up、down、left、right,默认向左(left) 滚动方式属性——behavior:scroll(循环滚动,默认效果),alternate(来回交替进行滚动),slide(只滚动...
  • Html实现滚动文字-类似网页中的公告

    万次阅读 2018-04-04 09:02:12
    1.描述:Html实现滚动文字-类似网页中的公告2.原理:使用marquee标签3.属性: *align: 对齐方式-top、middle、bottom *direction: 滚动文字方向-up、left、right、dowm *behavior: 滚动的方式-scoll(循环滚动)、...
  • HTML如何实现滚动文字

    千次阅读 2019-03-21 11:35:00
    HTML如何实现滚动文字 一、总结 一句话总结:marquee标签,也可以用js和css来实现 marquee标签 也可jss和css <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom ...
  • html5实现滚动文字

    千次阅读 2017-08-16 02:34:21
    html5实现滚动文字 1 2 3 4 div class="custom-notice">  i class="icon-notice">i>  marquee class="noticeText ng-binding" direction="left" ...
  • Html 滚动文字

    千次阅读 2011-11-25 11:32:04
    代码如下滚动文字 滚动文字 滚动文字 滚动文字 marquee 参数: BGColor:滚动文本框的背景颜色。 Direction:滚动方向设置,可选择Left、Right、up和down。 scrolldelay:每轮滚动...
  • html滚动文字效果|跑马灯效果

    千次阅读 2014-03-22 15:52:22
    滚动文字 》》》属性 1) 滚动方向:direction=”up/down/left/right” 2) 滚动方式:behavior 三种方式scroll 循环滚动;slide 滚动一次后停止;alternate 交替滚动 【默认为scroll循环滚动】 3) 滚动速度:...
  • html文字滚动代码

    2012-05-16 13:40:52
    代码如下滚动文字 滚动文字 滚动文字 滚动文字 marquee 参数:  BGColor:滚动文本框的背景颜色。  Direction:滚动方向设置,可选择Left、Right、up和down。  scrolldelay:每轮...
  • html向上无间隔滚动文字(图片)

    千次阅读 2015-08-19 10:08:01
    利用JavaScript实现文字滚动效果 具体代码如下: 向上无间隔滑动 window.onload = function() { var speed=30; var b=document.getElementById("b"); var a=document.getElementById("a"); var roll=...
  • html 背景图不随滚轮滚动 文字滚动

    千次阅读 2018-10-24 15:48:20
    代码: ...DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 82,793
精华内容 33,117
关键字:

html滚动文字