移动文字(marquee标签)w3c非标准

简介:

marquee标签:创建一个滚动的文本字幕,应用于文字、图片、表格。
基本语法: 
<marquee>...</marquee>
属性汇总例句:
<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 bgcolor=#ccffff height=150 width=15% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()><P align=center>此处输入滚动内容</P></marquee>

此处输入滚动内容

 

在基本语法中输入文字代码、代入图片代码、Flash动画代码和表格代码。
<marquee>这里是输入文字的地方,还可以放图片代码、Flash动画代码和gif动态小图代码。</marquee>

示例如下表:

文字

 图片

Flash动画

表格

LOVE

启野博客 

LOVE

HTML文字代码移动文字(marquee 标签属性详解)1 - qy-0824 - 启野的博客

 


  
marquee标签属性

direction

表示滚动的方向(默认为left)

behavior

表示滚动的方式

loop

决定滚动文字的滚动次数

scrollamount       

决定文字滚动的速度

scrolldelay

决定文字滚动的延时

bgcolor            

文字滚动范围的背景颜色

width和height      

决定滚动文字在页面中的矩形范围大小

hspace和vspace     

决定滚动矩形区域距周围的空白区域

onmouseover=this.stop() 

onmouseout=this.start()

表示当鼠标移上区域的时候滚动停止

表示当鼠标移开的时候又继续滚动

align  

水平对齐

valign 

垂直对齐方式

备注:marquee标签的属性都是可选的,根据需要而定制。

marquee标签属性详解

direction

属性




属性的参数值

示例代码

示例

direction="left"

向左(默认值)

 

<marquee direction="left">我向左滚动</marquee>

 

direction="right"

向右

<marquee direction="right">我向右滚动</marquee>

direction="up"
向上

 

<marquee direction="up">我向上滚动</marquee>

 

direction="down"

向下

 

<marquee direction="down">我向下滚动</marquee>

 

behavior

属性




属性的参数值

示例代码

示例

behavior="alternate"

来回滚动

<marquee behavior="alternate">我来回滚动</marquee>

behavior="scroll"

单方向循环滚动

 

<marquee behavior="scroll">我单方向循环滚动</marquee>

 

<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>

 

 

我改单方向向上循环滚动

behavior="slide"

只滚动一次

 

<marquee behavior="slide">我只滚动一次</marquee>

 

<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>

 

 

我改向上只滚动一次了

loop

属性




属性的参数值

示例代码

示例

loop="2"

滚动2次

 

<marquee loop="2">我滚动2次。</marquee>

 

loop="infinite"

无限循环滚动

 

<marquee loop="infinite">我无限循环滚动。</marquee>

 

loop="-1"

无限循环滚动

 

<marquee loop="-1">我无限循环滚动。</marquee>

 

scrollamount速度属性

scrolldelay

延时属性




属性的参数值

示例代码

示例

scrollamount="100"

速度很快

 

<marquee scrollamount="100">我速度很快</marquee>

 

scrollamount="50"

速度慢了些

 

<marquee scrollamount="50">我慢了些。</marquee>

 

scrolldelay="30"

小步前进

 

<marquee scrolldelay="30">我小步前进。</marquee>

 

scrolldelay="1000" scrollamount="100"

大步前进

 

<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

 

bgcolor

属性

背景颜色




属性的参数值

示例代码

示例

 

bgcolor属性文字滚动范围的背景颜色,参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜色名字(如red、yellow、blue等)。

 

<marquee behavior=="slide" direction="left" bgcolor="yellow">我的背景色是黄色的</marquee>

 

 

width

height

属性




属性的参数值

示例代码

示例

 

width和height属性的作用决定滚动文字在页面中的矩形范围大小。
width属性用以规定矩形的宽度,height属性规定矩形的高度。
这两个属性的参数值可以是数字或者百分数,数字表示矩形所占的(宽或高)像素点数,百分数表示矩形所占浏览器窗口的(宽或高)百分比。

 

<marquee width="300" height="30" bgcolor="red">我宽300像素,高30像素。</marquee>

 

 

hspace

vspace

属性




属性的参数值

示例代码

示例

 

hspace和vspace属性这两个属性决定滚动矩形区域距周围的空白区域。

 

 

<marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>

<marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>

 

 

 

 

 

onmouseover

=this.stop() onmouseout

=this.start()

属性




属性的参数值

示例代码

示例

表示当鼠标移上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

 

<marquee onmouseover=this.stop() onmouseout=this.start()>表示当鼠标移上区域的时候滚动停止,当鼠标移开的时候又继续滚动。</marquee>

 

valign

align

对齐属性




这里是输入文字 这里是输入文字 这里是输入文字
valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle。这个属性在TABLE标签的表格处理文字。

<MARQUEE scrollAmount=3 behavior=alternate>

<TABLE

borderColor=#003333

align=center border=1>
<TBODY>
<TR><TD> 这个属性在TABLE标签的表格处理文字。
</TD>
</TR>
</TBODY>
</TABLE>

</MARQUEE>

  
align 表示元素的水平对齐方式,值可以是left,center,right,默认为left。这个属性决定滚动文字位于距形内边框的上下左右位置。

<marquee direction=up width="300" height="200" bgcolor=#ccffff><P align=center>这个属性决定滚动文字位于距形内边框的上下左右位置。</P></marquee>

 





本文转自 风雨萧条 51CTO博客,原文链接:http://blog.51cto.com/1095221645/1844528,如需转载请自行联系原作者

相关文章
|
5月前
|
编解码 前端开发 JavaScript
对WEB标准以及W3C的理解与认识
对WEB标准以及W3C的理解与认识
54 0
|
9月前
|
XML 前端开发 JavaScript
理解web标准、w3c规范
理解web标准、w3c规范
339 0
|
前端开发 JavaScript
Web 标准 & W3C 规范
Web 标准 & W3C 规范
76 0
|
机器学习/深度学习 前端开发 JavaScript
10年Web前端开发工程师,聊聊他眼中的 W3C 规范
在接到邀请在团队分享有关于与 W3C 规范相关的话题时,就我个人而言还是很虚的。虽然从事 Web 前端开发已有近十年,接触 W3C 规范也有多年,但要出来聊与 W3C 规范相关话题,还是没有足够多的信心。在开始写 PPT 之前,我特意咨询了好友,并且参考了她分享的《走进W3C》。虽然对 W3C 没有全面的认识,但我还是想从我个人的角度来看和思考 W3C 规范。希望接下来的分享对初次接触 W3C 或想深入 W3C 的同学有所帮助。
214 0
10年Web前端开发工程师,聊聊他眼中的 W3C 规范
|
Web App开发 安全 API
W3C批准WebAuth作为无密码登录的Web标准
World Wide Web Consortium (W3C) 宣布 Web Authentication API (WebAuthn) 成为正式的 Web 标准。
1687 0
|
新零售 Web App开发 UED
让小语种用户上网更轻松 阿里助力W3C扩展Web标准
阿里巴巴作为首批官方赞助商以及中国第一家参与机构,为Web技术的国际标准组织——万维网联盟(World Wide Web Consortium,业界简称W3C)国际化标准活动计划,注入了资金支持,将通过开发需求文档,分析差距,扩展HTML,CSS及SVG等标准技术,实现Web对小语种文字的正确呈现。
2019 0
|
Web App开发 数据安全/隐私保护
|
Web App开发 数据安全/隐私保护