一个有意思的标签<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(' ...
随机推荐
- 从指定Dictionary中移除指定值项
void Removeltems(Dictionary<int, ltem> _dicltemMap, ltem _item) { List<ltem> keys=new Li ...
- Ubuntu以及CentOS7修改ssh端口号详细步骤
1.Ubuntu修改ssh端口号步骤: 1.修改sshd.config文件.执行vim etc/ssh/sshd_config.增加上我们需要增加的ssh的端口号.图例增加了5309的端口号. ESC ...
- pat1015. Reversible Primes (20)
1015. Reversible Primes (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A r ...
- Win7 x86内核调试与TP反调试的研究
参考 这两天对某P双机调试的学习及成果 ,非常好的一篇分析贴. 本文在Win7 x86下的分析,在虚拟机中以/DEBUG模式启动TP游戏,系统会自动重启. 0x01 内核调试全局变量 根据软件调试 ...
- one-vs-all案例
使用one-vs-all初始手写字母识别 数据特点 每一个图片都是20 x 20的像素矩阵,但是在输入的样本中是一个1 x 400的向量,标签y在{0, 1, 2, ..., 9}之间取值 共有500 ...
- jQuery中的DOM操作——《锋利的JQuery》
jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...
- 用ECMAscript5中的forEach函数遍历数组
1 var a = [1,2,3]; 2 a.forEach(function(value,index,arr){ 3 arr[index] = value + index; 4 }) 5 conso ...
- bootstrap fileinput+MVC 上传多文件,保存
新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...
- js系列之js简介
该系列教程都来源于:廖雪峰老师的博客 JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱 ...
- H5跟ios、android交互跟数据对接
需求: APP要用H5页面做展示,而且要获取到对应的商品ID,用户点击H5页面跳回APP原生页面. 方法: 先要判断用户是ios还是android设备(这里只考虑ios跟android,因为它俩写法还 ...