该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果
该标签是个容器标签
语法:

<marquee></marquee>

以下是一个最简单的例子:

代码如下:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

下面这两个事件经常用到:
onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动
onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动

代码如下:

<marquee onMouseOut="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 align="absmiddle">align="absmiddle": 绝对中央对齐。 </marquee>
<marquee align="baseline">align="baseline": 底线对齐。 </marquee>
<marquee align="bottom">align="bottom": 底部对齐(默认)。 </marquee>
<marquee align="left">align="left": 左对齐。 </marquee>
<marquee align="middle">align="middle": 中间对齐。 </marquee>
<marquee align="right">align="right": 右对齐。 </marquee>
<marquee align="texttop">align="texttop": 顶线对齐。 </marquee>
<marquee align="top">align="top": 顶部对齐。 </marquee>

behavior
设定滚动的方式:
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide:  表示由一端滚动到另一端,不会重复。

代码如下:

<marquee behavior="alternate">alternate:表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll:表示由一端滚动到另一端,会重复。</marquee>
<marquee behavior="slide">slide:  表示由一端滚动到另一端,不会重复。</marquee>

bgcolor
设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。

代码如下:

<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>

direction
设定活动字幕的滚动方向

代码如下:

<marquee direction="down">设定活动字幕的滚动方向direction="down":向下</marquee>
<marquee direction="left">设定活动字幕的滚动方向direction="left":向左</marquee>
<marquee direction="right">设定活动字幕的滚动方向direction="right":向右</marquee>
<marquee direction="up">设定活动字幕的滚动方向direction="up":向上</marquee>

height
设定活动字幕的高度

代码如下:
<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>

width
设定活动字幕的宽度

代码如下:
<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>

hspace
设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal(水平)space around the display box.

代码如下:

  <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
    </tr>
  </table>

vspace
设定活动字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical(垂直) space around the display box.

代码如下:
<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

loop
设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

代码如下:

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

scrollamount
设定活动字幕的滚动速度,单位pixels

代码如下:

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>

scrolldelay
设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)
值大了会有一步一停顿的效果

代码如下:

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>

---------------------------------------------------------------------

html之marquee会移动的文字的更多相关文章

  1. marquee跑马灯效果的相关属性

    介绍HTML设置滚动文字marquee的相关属性 ㈠文字滚动标签 设置文字滚动使用<marquee></marquee>标签,可以再标签里面设置字体的颜色,字号,字体大小等. ...

  2. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

  3. HTML快速入门3

    四.表格 (Table) 1. 表格的基本形式 表由 <table> 开始, </table> 结束,表的内容由 <tr>,<th> 和 <td& ...

  4. html部分---表单、iframe、frameset及其他字符的用法(以及name、id、value的作用与区别);

    <form action="aa.html" method="post/get"> /action的作用是提交到..,methed是提交方法,用po ...

  5. 这些废弃的 HTML 标签不要用

    HTML 已经发展了多年,现在 W3C 已经发布了 HTML 5.1 的提案推荐标准,一些陈旧废弃的标签已经在后继的标准中逐渐消失.这里为大家列出那些已经被废弃 HTML 标签,看看你是不是还在使用它 ...

  6. HTML语言简单回顾

    简单复习一下html语言. html的基本结构如下: <html> <head> <title></title> </head> <b ...

  7. html5部分相关

    滚动速度属性 scrollamount 例子<marquee scrollamount="3">这个速度是3</marquee> <marquee s ...

  8. 框架和css基础

    框架:一.框架集:1.<frameset></frameset>不能有<body>标签 属性:1)cols:把网页拆分成几列(左右拆分)eg:<framese ...

  9. 我的第一个python web开发框架(15)——公司介绍编辑功能

    完成登录以后,就会进入后台管理系统的主界面,因为这个是小项目,所以导航菜单全部固化在HTML中,不能修改.一般后台还会有一个欢迎页或关键数据展示的主页面,小项目也没有多大的必要,所以登录后直接进入公司 ...

随机推荐

  1. leetcode 之Single Number(13)

    看见这题我的第一反应是用哈希来做,不过更简洁的做法是用异或来处理,只要是偶数个都为0(0和任意数异或仍为数本身). int singleNumber(int A[], int n) { ; ; i & ...

  2. log4j日志相对路径,Tomcat(第三方和Springboot内置)参数catalina.home和catalina.base的设置

    关于Log4j日志相对路径的配置请看:log4j 产生的日志位置设置 和 catalina.home.catalina.base . 由于我们在Log4j的配置中引入了系统属性${catalina.b ...

  3. Nginx设置默认目录

    server { listen ; server_name basic.com; index index.html index.htm index.php; root /www/wwwroot/bas ...

  4. CentOS 7.4 如何安装 MariaDB 10.3.9 Stable 数据库

    CentOS 7.4 如何安装 MariaDB 10.3.9 Stable 数据库 一.CentOS 7.4上卸载 Mariadb 数据库 1.查询所安装的MariaDB组件 [libin@VM_0_ ...

  5. jQuery插件开发,jquery插件

    关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...

  6. gvim代码补全

    gvim 代码自动提示 插件 插件名:AutoComplPop 下载地址:http://www.vim.org/scripts/script.php?script_id=1879 gvim 代码模板补 ...

  7. thinkjphp 模板中获取url中的action

    <if condition="ACTION_NAME eq 'add'">新增<else/>编辑</if>

  8. ZOJ 3498 Javabeans

    脑筋急转弯. 如果是偶数个,那么第一步可以是$n/2+1$位置开始到$n$都减去$n/2$,后半段就和前半段一样了. 如果是奇数个,那么第一步可以是$(n+1)/2$位置开始到$n$都减去$(n+1) ...

  9. JavaScript的基础学习(一)

    一.JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...

  10. CUPOJ6242: LHC的二进制升级版

    6242: LHC的二进制升级版 时间限制:1秒 内存限制:128MB Special Judge 提交:6 正确:3 题目描述 在发现了3的二进制特殊性质后,LHC认为形如1.3.7.15..... ...