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

 一、marquee标签的几个重要属性:

1.direction:滚动方向(包括4个值:up、down、left、right)

说明:up:从下向上滚动;down:从上向下滚动;left:从右向左滚动;right:从左向右滚动。

语法:<marquee direction="滚动方向">...</marquee>

2.behavior:滚动方式(包括3个值:scroll、slide、alternate)

说明: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>

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>

<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

6.width、height:设定滚动字幕的宽度、高度

语法:<marquee width="500" height="200">...</marquee>

7.bgcolor:设定滚动字幕的背景颜色(可以是颜色值,也可以是rgb()或rgba()函数)

语法:<marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>

8.hspace、vspace:空白空间(相当于设置margin值)

说明:hspace:设定活动字幕里所在的位置距离父容器水平边框的距离,如hspace=“10”,即等同于:margin:0 10px;

vspace:设定活动字幕里所在的位置距离父容器垂直边框的距离,如vspace=“10”,即等同于:margin:10px 0;

语法:<marquee hspace="10"  vspace="10">...</marquee>(等同于:margin:10px;)

9.align:设定滚动字幕内容的对齐方式(包括9个值:absbottom、absmiddle、baseline、bottom、left、middle、right、                                       texttop、top)

说明:absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
                          absmiddle:绝对中央对齐
                          baseline:底线对齐
                          bottom:底部对齐(默认)
                          left:左对齐
                          middle:中间对齐
                          right:右对齐
                          texttop:顶线对齐
                          top:顶部对齐

语法:<marquee align="对齐方式">...</marquee>

10.face:设定滚动字幕的文字字体

语法:<marquee font="楷体_GB2312"></marquee>

11.color:设定滚动字幕的文字颜色

语法:<marquee color="#333"></marquee>

12.size:设定滚动字幕的文字字号

语法:<marquee size="3"></marquee>

13.STRONG:设定滚动字幕的文字加粗

语法:<marquee STRONG></marquee>

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

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的两个事件</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>参数不少,但毕竟不能实现复杂的和自定义的特殊跑马灯效果,而且还有浏览器限制,所以我们更多情况下会采用JavaScript来实现跑马灯滚动效果。

一个有意思的标签<marquee>的更多相关文章

  1. 一个神奇的HTML标签-----marquee

    今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 语法:<marquee>...</marqu ...

  2. 自动滚动标签marquee

    <marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...

  3. HTML标签marquee 来制作页面滚动

    页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用m ...

  4. 一个有意思的CSS样式库--BUTTONS

    我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...

  5. HTML标签marquee实现滚动效果

    html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<ma ...

  6. linux下一个有意思的问题(文件名以短划线或空格开头)

    linux下一个有意思的问题(文件名以短划线开头) 这本是无意中的一个发现. 在linux下,文件名中含有 - 是没有问题,但是如果文件名是以-作为第一个字符的,那么就比较麻烦了. 问题演示 看这里, ...

  7. [原创]java WEB学习笔记40:简单标签概述(背景,使用一个标签,标签库的API,SimpleTag接口,创建一个自定义的标签的步骤 和简单实践)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. Python一个有意思的地方:reduce、map、filter

    今天阅读了关于Python函数式编程的系列文章,地址在这里: http://www.cnblogs.com/huxi/archive/2011/06/24/2089358.html 里面提到了四个内建 ...

  9. javascript--获取一个页面各个标签的数量

    获取一个页面各个标签的数量 document.getElementsByTagName('*')--获取所有的标签. var obj = document.getElementsByTagName(' ...

随机推荐

  1. 从指定Dictionary中移除指定值项

    void Removeltems(Dictionary<int, ltem> _dicltemMap, ltem _item) { List<ltem> keys=new Li ...

  2. Ubuntu以及CentOS7修改ssh端口号详细步骤

    1.Ubuntu修改ssh端口号步骤: 1.修改sshd.config文件.执行vim etc/ssh/sshd_config.增加上我们需要增加的ssh的端口号.图例增加了5309的端口号. ESC ...

  3. pat1015. Reversible Primes (20)

    1015. Reversible Primes (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A r ...

  4. Win7 x86内核调试与TP反调试的研究

    参考  这两天对某P双机调试的学习及成果 ,非常好的一篇分析贴. 本文在Win7 x86下的分析,在虚拟机中以/DEBUG模式启动TP游戏,系统会自动重启. 0x01 内核调试全局变量  根据软件调试 ...

  5. one-vs-all案例

    使用one-vs-all初始手写字母识别 数据特点 每一个图片都是20 x 20的像素矩阵,但是在输入的样本中是一个1 x 400的向量,标签y在{0, 1, 2, ..., 9}之间取值 共有500 ...

  6. jQuery中的DOM操作——《锋利的JQuery》

    jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...

  7. 用ECMAscript5中的forEach函数遍历数组

    1 var a = [1,2,3]; 2 a.forEach(function(value,index,arr){ 3 arr[index] = value + index; 4 }) 5 conso ...

  8. bootstrap fileinput+MVC 上传多文件,保存

    新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...

  9. js系列之js简介

    该系列教程都来源于:廖雪峰老师的博客 JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱 ...

  10. H5跟ios、android交互跟数据对接

    需求: APP要用H5页面做展示,而且要获取到对应的商品ID,用户点击H5页面跳回APP原生页面. 方法: 先要判断用户是ios还是android设备(这里只考虑ios跟android,因为它俩写法还 ...