一个有意思的标签<marquee>
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>的更多相关文章
- 一个神奇的HTML标签-----marquee
今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 语法:<marquee>...</marqu ...
- 自动滚动标签marquee
<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...
- HTML标签marquee 来制作页面滚动
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用m ...
- 一个有意思的CSS样式库--BUTTONS
我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...
- HTML标签marquee实现滚动效果
html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<ma ...
- linux下一个有意思的问题(文件名以短划线或空格开头)
linux下一个有意思的问题(文件名以短划线开头) 这本是无意中的一个发现. 在linux下,文件名中含有 - 是没有问题,但是如果文件名是以-作为第一个字符的,那么就比较麻烦了. 问题演示 看这里, ...
- [原创]java WEB学习笔记40:简单标签概述(背景,使用一个标签,标签库的API,SimpleTag接口,创建一个自定义的标签的步骤 和简单实践)
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- Python一个有意思的地方:reduce、map、filter
今天阅读了关于Python函数式编程的系列文章,地址在这里: http://www.cnblogs.com/huxi/archive/2011/06/24/2089358.html 里面提到了四个内建 ...
- javascript--获取一个页面各个标签的数量
获取一个页面各个标签的数量 document.getElementsByTagName('*')--获取所有的标签. var obj = document.getElementsByTagName(' ...
随机推荐
- Android ContentProvider的介绍(很详细)
博客分类: android进阶 一.ContentProvider的概念 ContentProvider:为存储和获取数据提供统一的接口.可以在不同的应用程序之间共享数据.Android已经为常见 ...
- 游戏源码--Unity开源Moba游戏-服务器-客户端完整V1.0
http://www.manew.com/thread-111658-1-1.html
- unity手游使用terrian注意事项
1.Terrain比较占性能,普通机器测试,未开terrain 60帧,开启terrain后 30帧 2.Terrain的size大小与占用性能无关,不过越小的Terrain的烘焙上去的阴影越模糊 ...
- 最好用的数据存储Easy Save2讲解
转载:http://www.manew.com/thread-100109-1-1.html 今天抽时间学习了“Easy Save2”插件,版本v2.6.3 我个人觉得这个插件是做数据存取最好的 ...
- Coursera 机器学习 第8章(下) Dimensionality Reduction 学习笔记
8 Dimensionality Reduction8.3 Motivation8.3.1 Motivation I: Data Compression第二种无监督问题:维数约简(Dimensiona ...
- bnu 28890 &zoj 3689——Digging——————【要求物品次序的01背包】
Digging Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ID: 36 ...
- Java线程中断的本质深入理解
Java的中断是一种协作机制.也就是说调用线程对象的interrupt方法并不一定就中断了正在运行的线程,它只是要求线程自己在合适的时机中断自己. 一.Java中断的现象 首先,看看Thread类里的 ...
- POST 还是 GET?
POST 还是 GET? 浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理.共有两种方法:POST 方法和 GET 方法. 如果采用 POST 方法,浏览器将会按照下面两步来 ...
- 基于RBAC模式的权限管理系统设计概要
很多人都知道以角色为基础的权限管理设计(RBAC),但是大部分人似懂非懂,不知道完整的权限管理系统都包括哪些内容. 在此以权限管理的使用场景来说明一下完整的权限管理内容. 一是鉴权管理,即权 ...
- sp_addlinkedserver创建远程服务器查询
远程服务器查询可以分两步完成: 1.建立连接服务器 exec sp_addlinkedserver @server='Test_Server', --被访问的服务器别名 @srvproduct='', ...