该标签不是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

设定活动字幕里所在的位置距离父容器水平边框的距离,代码如下:

<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

设定活动字幕里所在的位置距离父容器垂直边框的距离,代码如下:

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

loop

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

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p> </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. 转:HTML中让图片滚动的<marquee>标签的使用方法

    实例: <marquee id="affiche" align="left" behavior="scroll" bgcolor=&q ...

  2. 详解html中的marquee属性

    转自:https://www.jb51.net/web/531309.html 该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可 ...

  3. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  4. “Win10 UAP 开发系列”之 在MVVM模式中控制ListView滚动位置

    这个扩展属性从WP8.1就开始用了,主要是为了解决MVVM模式中无法直接控制ListView滚动位置的问题.比如在VM中刷新了数据,需要将View中的ListView滚动到顶部,ListView只有一 ...

  5. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  6. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  7. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  8. 【MFC】如何在MFC创建的程序中更改主窗口的属性 与 父窗口 WS_CLIPCHILDREN 样式 对子窗口刷新的影响 与 窗体区域绘制问题WS_CLIPCHILDREN与WS_CLIPSIBLINGS

    如何在MFC创建的程序中更改主窗口的属性 摘自:http://blog.sina.com.cn/s/blog_4bebc4830100aq1m.html 在MFC创建的单文档界面中: (基于对话框的, ...

  9. CSS中如何使用背景样式属性,看这篇文章就够用了

    css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...

随机推荐

  1. mysql 常用获取时间sql语句

    --当年第一天: SELECT DATE_SUB(CURDATE(),INTERVAL dayofyear(now())-1 DAY); --当年最后一天: SELECT concat(YEAR(no ...

  2. 读《Java并发编程的艺术》学习笔记(二)

    第2章  Java并发机制的底层实现原理 Java代码在编译后变成字节码,字节码被类加载器加载到JVM中,JVM执行字节码,最终转换为汇编指令在CPU上执行,Java中所使用的并发机制依赖于JVM的实 ...

  3. JS中面向对象中的继承(常用写法)---核心部分

    1.基本概念 子类继承父类,但是不能影响父类.包括1.混合继承(构造函数+原型) 2.ES6新增class的继承. 接下来介绍,面向对象中继承的两种常用写法.即混合继承(构造函数+原型)和class继 ...

  4. Hyperledger Fabric1.4环境搭建

    参考文档:https://www.cnblogs.com/cbkj-xd/p/11067790.html 1. 设置下载源为阿里源 sudo vim /etc/apt/sources.list 在配置 ...

  5. python3.6 单文件爬虫 断点续存 普通版 文件续存方式

    # 导入必备的包 # 本文爬取的是顶点小说中的完美世界为列.文中的aa.text,bb.text为自己创建的text文件 import requests from bs4 import Beautif ...

  6. 原来rollup这么简单之 rollup.rollup篇

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. 计划 rollup系列打算 ...

  7. 028.核心组件-API Server

    一 Kubernetes API Server原理 1.1 API Server功能 Kubernetes API Server的核心功能是提供Kubernetes各类资源对象(如Pod.RC.Ser ...

  8. vue--基础应用 全选

    1.用computed实现全选 <body> <div id="app"> <input type="checkbox" v-mo ...

  9. 【TIJ4】第三章全部习题

    题目都相当简单没啥说的直接放代码就行了... 3.1 package ex0301; //[3.1]使用“简短的”和正常的打印语句来写一个程序 import static java.lang.Syst ...

  10. 【MyBatis笔记】mapper文件的配置以及说明

    <!doctype html>[MyBatis笔记]mapper文件的配置以及说明 figure:last-child { margin-bottom: 0.5rem; } #write ...