当前位置：文档之家 › HTML中Marquee属性详解用于文字、图片等的滚动效果

HTML中Marquee属性详解用于文字、图片等的滚动效果

  • 格式：pdf
  • 大小：61.20 KB
  • 文档页数：4

下载文档原格式

  / 4

合集下载

marquee标签的用法

marquee标签的用法

marquee标签的用法Marquee标签是HTML语言中的一个标签，它的存在方便了网页的美观性。

它可以实现网页中文本、图片或者其他元素的滚动，添加滚动效果。

Marquee标签是用来实现网页文本或图片滚动的，可以实现一些简单的网页动画效果，它的出现让网页的美观性大大提高，使网页设计更加丰富。

Marquee标签有一些关键属性，它们都是用于控制文本、图片或元素滚动方向和速度的。

其中包括：direction，scrollamount，scrolldelay，loop等。

direction属性可以控制文本或图片在网页中的滚动方向，有以下四个可选值：left，right，up，down。

它是必须要指定的属性。

scrollamount属性可以控制文本或图片在网页中的滚动速度，可以设置1-25之间的数值，值越大，滚动速度越快；scrolldelay属性可以控制文本或图片滚动时的停顿时间，可以设置1-25之间的数值，值越大，停顿时间越长；loop属性是用来控制文本或图片在网页中滚动循环次数的，可以设置-1，表示循环滚动；也可以设置大于0的整数，表示滚动多少次就停止滚动。

Marquee标签的使用非常简单，只需要给滚动的文本或图片标签上添加Marquee标签，然后在Marquee标签中添加属性就可以了。

Marquee标签的使用有以下几步：1. 为滚动的文本或图片标签添加Marquee标签；2.Marquee标签中添加direction属性，定义滚动方向；3.Marquee标签中添加scrollamount属性，定义滚动速度；4.Marquee标签中添加scrolldelay属性，定义滚动停顿时间；5.Marquee标签中添加loop属性，定义滚动循环次数。

Marquee标签的使用可以让网页设计更加美观，使用起来也是非常的简单。

例如，当实现文字在网页中滚动时，可以在文本标签中添加Marquee标签，并且添加以上属性，就可以在网页中实现文本滚动效果了。

滚动文字、图片等html代码详解

滚动文字、图片等html代码详解
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
3.实例：
a)如何给滚动字幕加超链接？这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果，代码是<marquee scrollAmount=2 width=300><a href=>中央电视台</a></marquee>，点击中央电视台就可以进入了：
?注意：如果你的网页经过了FrontPage编辑，保存之后，只能滚动一行，这时候你发现你原来的代码顺序已经变了，My god！解决的办法是，找出原来的代码，把它嵌入到JavaScript的document.write中即可，上述代码写为：
<script>document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>?早晨好啊！<br>?空气好清新啊<br>?今朝食乜好呢？<p>?<a href=>中央电视台</a></marquee>')</script>
5.如何给滚动图片加超链接？
用<a href="/>";和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。4个图片带连接，在新窗口中打开中秋节贺卡的例子如：

marquee标签详解

marquee标签详解

marquee标签详解<marquee>标签，它是成对出现的标签，⾸标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。

<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。

behavior属性behavior属性的参数值为alternate、scroll、slide中的⼀个，分别表⽰⽂字来回滚动、单⽅向循环滚动、只滚动⼀次，需要注意的是:如果在<marquee>标签中同时出现了direction和behavior属性，那么scroll和slide的滚动⽅向将依照direction属性中参数的设置。

<marquee behavior="alternate">我来回滚动</marquee><marquee behavior="scroll">我单⽅向循环滚动</marquee><marquee behavior="scroll" direction="up" height="30">我改单⽅向向上循环滚动</marquee><marquee behavior="slide">我只滚动⼀次</marquee><marquee behavior="slide" direction="up">我改向上只滚动⼀次了</marquee>bgcolor属性⽂字滚动范围的背景颜⾊，参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜⾊名字(如red、yellow、blue等)。

html之marquee详解（超详细！）

html之marquee详解（超详细！）

html之marquee详解（超详细！）该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法：<marquee></marquee>以下是一个最简单的例子：代码如下:<marquee><font size=+3 color=red>Hello,World</font></marquee>下面这两个事件经常用到：onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动代码如下:<marqueeonMouseOut="this.start()"onMouseOver="this.stop()"> onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动</marquee>这是一个完整的例子：代码如下:<marquee id="affiche" align="left"behavior="scroll" bgcolor="#FF0000"direction="up" height="300" width="200"hspace="50" vspace="20" loop="-1" scrollamount="10"scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">这是一个完整的例子</marquee>该标签支持的属性多达11个：align设定<marquee>标签内容的对齐方式absbottom：绝对底部对齐（与g、p等字母的最下端对齐）absmiddle：绝对中央对齐baseline：底线对齐bottom：底部对齐（默认）left：左对齐middle：中间对齐right：右对齐texttop：顶线对齐top：顶部对齐代码如下:<marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。

marquee标签的用法

marquee标签的用法

marquee标签的用法marquee标签是HTML中比较常用的一个标签，它可以让文字或图片在页面中滚动显示，用起来非常方便，给页面增添一种特别的视觉效果，能在有限的空间内让用户看到更多的信息。

marquee标签是最基本的HTML标签，它是由一对<marquee>和</marquee>构成，其中内容可以是文字，也可以是图片链接。

在使用marquee标签来定义文本滚动的方向与速度的时候，可以使用几个常用的属性来控制，其中有：direction：可以指定文字滚动的方向，取值有left、right、up和down，如果不指定则默认是left。

scrollamount：可以指定文字滚动的速度，以毫秒为单位，如果不指定，默认会根据文字的长度自动调整速度。

scrolldelay：可以指定文字滚动停顿的时间，以毫秒为单位，如果不指定，默认会根据文字的长度自动调整时间。

loop：可以指定文字滚动的次数，如果设置为0，则表示无限次滚动；如果设置为infinite，也表示无限次滚动，如果不指定，默认只滚动一次。

hspace可以指定文字滚动的空间，以像素为单位，默认为0。

vspace：可以指定文字滚动的高度，以像素为单位，默认为0。

这些属性都可以结合起来使用，来定义文字滚动的方向与速度，下面我们来看一个简单的例子：<marquee direction=left scrollamount=2 loop=infinitehspace=10 vspace=20文字会从右向左循环滚动，滚动的速度是2毫秒，每次滚动的空间是10像素，每次滚动的高度是20像素</marquee>上面的例子就是把所有属性都结合起来使用的一个例子，其实我们也可以只指定部分属性，只要满足我们的需求就可以，比如我们只想指定文字滚动的方向与速度，那么我们可以这么写：<marquee direction=left scrollamount=2文字会从右向左滚动，滚动的速度是2毫秒。

HTML如何实现滚动文字

HTML如何实现滚动文字

HTML如何实现滚动⽂字⼀、HTML滚动⽂字（转）转⾃：HTML滚动⽂字 - 蒋固⾦（jianggujin）的专栏 - CSDN博客https:///jianggujin/article/details/70832469marquee 滚动⽂字标签在⼀个页⾯中会有很多多媒体元素，⽐如动态⽂字、动态图象、⾳视频等，⽽最简单的就是天价滚动⽂字了，在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 滚动⽅向属性默认情况下，⽂字从右向左滚动，实际应⽤中，我们可能需要改变⽅向，就可以通过该属性来设置，该属性可⽤值有：up，down，left，right，分别表⽰向上、向下、向左和向右滚动。

⽰例如下：<!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 可以设置滚动⽅式，如往复运动等。

marquee标签的用法

marque‎e标签的用法‎Marque‎e标记用于在‎可用浏览区域‎中滚动文本。

这个标记只适‎用于IE3以‎后的版的浏览‎器：格式：[MARQUE‎E ALIGN="…"BEHAVI‎O R="…"BGCOLO‎R="…"DIRECT‎I ON="…"HEIGHT‎="…"WIDTH="…"HSPACE‎="…"VSPACE‎="…"LOOP="…"SCROLL‎A MOUNT‎="…"SCROLL‎D ELAY="…"ONMOUS‎E OUT=this.start() ONMOUS‎E OVER=this.stop() ]…[/MARQUE‎E]属性：ALIGN：用于按设定的‎值对齐滚动的‎文本。

ALIGN可‎以设定的值有‎：LEFT，CENTER‎，RIGHT， TO P，BOTTOM‎。

此属性不是必‎须使用的。

例：[MARQUE‎E ALIGN="TOP"] 这段滚动文字‎设定为上对齐‎[/MARQUE‎E]BEHAVI‎O R：可以在页面上‎一旦出现文本‎时让浏览器按‎照设定的方法‎来处理文本。

如果设定的方‎法是 SLI DE，那么文本就移‎动到文档上，并停留在页边‎距上。

如果设定为A‎L TERNA‎T E，则文本从一边‎移动到另一边‎。

如果设定为SC‎R OLL，文本将在页面‎上反复滚动。

本属性不是必‎须使用的。

可以设定的值‎有：SILIDE‎， ALTERN‎A T E，SCROLL‎。

例：[MARQUE‎E BEHAVI‎O R="ALTERN‎A TE"] 文字从一边移‎动到另一边 [/MARQUE‎E]BGCOLO‎R：用于设定字幕‎的背景颜色。

HTML标签marquee实现滚动效果的简单方法（必看）

HTML标签marquee实现滚动效果的简单⽅法（必看）页⾯的⾃动滚动效果，可由javascript来实现，但是今天⽆意中发现了⼀个html标签 - <marquee></marquee>可以实现多种滚动效果，⽆需js控制。

使⽤marquee标记不仅可以移动⽂字，也可以移动图⽚，表格等.语法：<marquee>...</marquee>；说明：在标记之间添加要进⾏滚动的内容。

重要属性：1.滚动⽅向direction（包括4个值：up、 down、 left和 right） 语法：<marquee direction="滚动⽅向">...</marquee>2.滚动⽅式behavior（scroll:循环滚动，默认效果； slide:只滚动⼀次就停⽌； alternate:来回交替进⾏滚动） 语法：<marquee behavior="滚动⽅式">...</marquee>3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位） 语法：<marquee scrollamount="5">...</marquee>4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒） 语法：<marquee scrolldelay="100">...</marquee>5.滚动循环loop（默认值是-1，滚动会不断的循环下去） 语法：<marquee loop="2">...</marquee>6.滚动范围width、height7.滚动背景颜⾊bgcolor8.空⽩空间hspace、vspace代码⽰例：XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2. <html xmlns="http://www.w/1999/xhtml">3. <head>4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5. <title>⽆标题⽂档</title>6. </head>7.8. <body>9. <div>10. <marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">11. 指整个Marquee对齐⽅式; (2)behavior:设置滚动的⽅式: scroll:表⽰由⼀端滚动到另⼀端,会重复,缺陷是不能⽆缝滚动。

HTML的滚动MARQUEE标签

HTML的滚动<MARQUEE>标签使用<MARQUEE>标签不仅可以移动文字，还可以移动图片。

本节单词记忆：标签 1.marquee 属性 1.direction 2.scrolldelay网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

语法:<MARQUEE scrolldelay="100" direction="up">滚动文字或图像</MARQUEE>其中，scrolldelay：表示滚动延迟时间，默认值为90ms。

direction：表示滚动的方向，默认为从右向左。

可以取下面4个值：up、down、left、right，使用direction属性来设置文字或图片的滚动方向。

示例1:<HTML><HEAD><TITLE>滚动字幕</TITLE></HEAD><BODY><MARQUEE scrolldelay ="100">水平滚动</MARQUEE><MARQUEE scrolldelay="300" direction="up" onmouseover="this.stop()"onMouseOut="this.start()"><A href="#"><IMG src="images/scroll/1.gif" border="0"align="middle"> Avon化妆品</A><BR><A href="#"><IMG src="images/scroll/2.gif" border="0"align="middle"> 雅诗兰黛 </A><BR></MARQUEE></BODY></HTML>示例1在浏览器中预览效果如图图片和字都会上下滚动。

让你的文字动起来——Marquee用法详解

<marquee loop=3>我只走三次哦</marquee>
参数四：scrollamount
移动速度。值取正整数。数值越大，速度越快。例：
<marquee scrollamount=25>看，我走多快！</marquee>
参数五：scrolldelay
延时。数值。例：Βιβλιοθήκη <marquee scrolldelay=1000>我走一走，停一停</marquee>
在论坛默认的编辑状态下我们可以通过ubb语法的move和fly语句让对象动起来但功能很简单只是平行地移动
让你的文字动起来——Marquee用法详解
让你的文字动起来——Marquee用法详解
发表日期：2005年8月12日 已经有14815位读者读过此文
在论坛默认的编辑状态下，我们可以通过UBB语法的move和fly语句让对象动起来，但功能很简单，只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果：向左、向右、向上、向下。再嵌套使用marquee语句，效果就更加丰富了。
其他参数：
空白(Margins)<hspace=数值 vspace=数值>
对齐方式(Align) <align=top/ middle/bottom>
参数六：bgcolor
底色。例：<marquee bgcolor=pink>看到了吧？有底色！</marquee>
参数七：width和height
就是移动的宽度与高度了。例：
<marquee width=200 height=200 bgcolor=pink direction=down>这个面积不够我移动！</marquee>
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
例： [MARQUEE SCROLLDELAY="5"] 此文本两次滚动之间的间隔时间为 5 毫秒
[/MARQUEE]
ONMOUSEOUT=this.start() ：用来设置鼠标移出该区域时继续滚动 ONMOUSEOVER=this.stop()：用来设置鼠标移入该区域时停止滚动
Marquee 也可以做飘浮广告效果： ＜marquee behavior="alternate" height="300" direction="up" scrollamount="3" scrolldelay="30" width="300" bgcolor="#3399FF"＞ ＜marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%"＞ ＜font style="font-size: 35px"＞Ouyang＜/font＞ ＜/marquee＞ <marquee> ... </marquee> 移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等 鼠标属性 onMouseOut=this.start() ........鼠标移出状态滚动 onMouseOver=this.stop() .........鼠标经过时停止滚动 方向 <direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移！</marquee> 方式 <bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee> <marquee behavior=slide>只走一次就歇了！</marquee> <marquee behavior=alternate>来回走</marquee> 循环 <loop=#> #= 次 数 ； 若 未 指 定 则 循 环 不 止 (infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee> <marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee> 速度 <scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee> 延时 <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！ </marquee> 外观(Layout)设置 对齐方式(Align) <align=#> #=top, middle, bottom <font size=6> <marquee align=# width=400>啦啦啦，我会移动耶！</marquee> </font> 底色 <bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee> 面积 <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>
LOOP：用于设定滚动字幕的滚动次数。当 LOOP 的值为"INFINITE"或是"-1"时， 则文字会无限制地滚动。此属性不是必须使用的。
例： [MARQUEE LOOP="-1" ]文字滚动无数次 [/MARQUEE] [MARQUEE LOOP="5" ]文字滚动 5 次 [/MARQUEE]
DIRECTION：用于设定文本滚动的方向，可以设定的值有：LEFT，RIGHT。此 属性不是必须使用的。
例： [MARQUEE DIRECTION="LEFT" ]文字向左边滚动 [/MARQUEE] [MARQUEE DIRECTION="RIGHT" ]文字向右边滚动 [/MARQUEE]
HEIGHT：用于设定滚动字幕的高度，高度可用像素或可视页面的百分比来表示。 此属性不是必须使用的。
空白 (Margins)<hspace=# vspace=#> <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！<：用于设定滚动字幕左右的空白空间，空白空间用像素表示。此属性不是 必须使用的。
例： [MARQUEE HSPACE="15" ]滚动字幕左右空白空间为 15 个像素 [/MARQUEE]
VSPACE：用于设定滚动字幕上下的空白空间，空白空间用像素表示。此属性不是 必须使用的。
例： [MARQUEE VSPACE="2"] 滚动字幕上下的空白空间为 2 个像素 [/MARQUEE]
属性： ALIGN：用于按设定的值对齐滚动的文本。ALIGN 可以设定的值有：LEFT，
CENTER，RIGHT，TOP，BOTTOM。此属性不是必须使用的。 例： [MARQUEE ALIGN="TOP"] 这段滚动文字设定为上对齐 [/MARQUEE]
BEHAVIOR：可以在页面上一旦出现文本时让浏览器按照设定的方法来 处理文 本。如果设定的方法是 SLIDE，那么文本就移动到文档上，并停留在页边距上。如果设定 为 AlterNATE，则文本从一边移动到另一边。如果设定 为 SCROLL，文本将在页面上反复 滚动。本属性不是必须使用的。可以设定的值有：SILIDE，AlterNATE，SCROLL。
html 中 Marquee 属性详解 用于文字,图片等等.... Marquee 标记用于在可用浏览区域中滚动文本。
格式： [MARQUEE ALIGN="…" BEHAVIOR="…" BGCOLOR="…" DIRECTION="…" HEIGHT="…" WIDTH="…" HSPACE="…" VSPACE="…" LOOP="…" SCROLLAMOUNT="…" SCROLLDELAY="…" ONMOUSEOUT=this.start() ONMOUSEOVER=this.stop() ] [/MARQUEE]
SCROLLAMOUNT：用于设定每个连续滚动文本后面的间隔，该间隔用像素表示。 此属性不是必须使用的。
例： [MARQUEE SCROLLAMOUNT="10"] 此 文 本 后 面 的 间 隔 为 10 个 像 素
[/MARQUEE]
SCROLLDELAY：用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。 此属性不是必须使用的。
例： [MARQUEE BEHAVIOR="AlterNATE"] 文字从一边移动到另一边 [/MARQUEE]
BGCOLOR：用于设定字幕的背景颜色。背景颜色可用 RGB、16 进制值的格式或 颜色名称来设定。
例： [MARQUEE BGCOLOR="RED"] 用 颜 色 名 称 设 定 滚 动 文 字 背 景 颜 色 为 红 色 [/MARQUEE] [MARQUEE BGCOLOR="#FF0000" ]用 16 进制值设定滚动文字背景颜色为红色 [/MARQUEE] [MARQUEE BGCOLOR=RGB(100%＇0%＇0%)] 用 RGB 设定滚动文字背景颜色 为红色 [/MARQUEE]
例： [MARQUEE HEIGHT="10%"] 滚动字幕的高度是可视页面的 10%[ /MARQUEE] [MARQUEE HEIGHT="12" ]滚动字幕的高度是 12 像素 [/MARQUEE]
WIDTH：用于设定字幕的宽度，宽度可用像素或可视页面的百分比来表示。此属 性不是必须使用的。
例： [MARQUEE WIDTH="90%"] 滚动字幕的宽度是可视页面的 90% [/MARQUEE] [MARQUEE WIDTH="200" ]滚动字幕的宽度是 200 像素 [/MARQUEE ]