一个有意思的标签<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(' ...
随机推荐
- maven+springboot+阿里大于
问题:maven仓库无法找到taobao-sdk-java-auto-1.0.jar包 目的:将jar包添加到maven项目中 1.在官网下载jar包 2.将jar包放在d盘 3.mvn instal ...
- Django From表单定制
参考文档: Forms The Forms API Working with forms 一.简单的Form表达定制 1)首先我们得定制Form表单类,下面我们创建一个简单的类: class Book ...
- 再探canvas(小球实例)
之前学习过canvas的一些使用,也用过canvas绘制过时钟, 但是很久不用,有些遗忘了,这里做一个简单的回顾. 在web页面创建一个canvas画布非常简单,如下即可: <canvas id ...
- 阿里云centos 7 中tomcat 自启动
这里我的tomcat的安装路径为 /usr/local/tomcat 1 为tomcat添加自启动参数 catalina.sh在执行的时候会调用同级路径下的setenv.sh来设置额外的环境变量,因此 ...
- JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)
需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...
- ubuntu java开发环境jdk安装
1. 下载JDK6安装包,我的为32位系统所以选择jdk-6u35-linux-i586.bin 下载地址:http://www.oracle.com/technetwork/java/javase/ ...
- 吴恩达《Machine Learning Yearning》总结(11-20章)
11.何时修改开发集.测试集和度量指标 开展一个新项目,尽快选好开发集和测试集:例子,根据度量指标A分类器排在B分类器前面,但是团队认为B分类器在实际产品上优于A分类器,这时就需要考虑修改开发集和测试 ...
- MVC中提交表单的4种方式
一,MVC HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...
- 如何取得GridView被隐藏列的值
如何取得GridView被隐藏列的值 分类: ASP.net 2009-06-25 12:47 943人阅读 评论(1 ...
- 使用ANY、Some或All关键字
可以使用All或Any关键字修改引入子查询的比较运算符.Some是与Any等效的ISO标准,All要求Where表达式与子查询返回的每个值进行比较时都应满足比较条件,Any则要求Where表达式与子查 ...