标签之美六——滚动字幕的应用

简介:

标签之美——滚动字幕的应用

在网页中,我们经常可以看到一些滚动出现的字幕,按钮等内容。滚动字幕的应用会使网页的内容更加生动紧凑。

1、滚动标签<marquee></marquee>

将滚动显示的文字放在这个标签内,就可以实现滚动字幕。这个标签有一个behavior属性,可以设置滚动方式:

scroll:循环滚动,默认的滚动方式

slide:只滚动一次

alternate:左右来回滚动

2、设置字幕背景颜色

?
1
2
3
< body >
< marquee  behavior = "alternate"  bgcolor = "#F4070B" >这里是滚动字幕</ marquee >
</ body >

145426_IENM_2340880.png

3、设置字幕滚动方向:direction属性,可以设置的值有:left,right,up,down。分别表示从右向左滚动,从左向右滚动,从下向上滚动,从上向下滚动。

4、设置字幕的滚动速度

通过设置scrollamount属性来更改字幕的滚动速度,数值越大,速度越快。

5、设置字幕滚动时间间隔

scrolldelay可以来设置字幕的停顿时间间隔,单位是毫秒。效果和速度属性相似。

6、设置滚动次数

loop属性可以设置滚动次数,-1则为循环滚动。

7、设置鼠标滑过时停止滚动,移开时继续滚动:

?
1
2
3
< body >
< marquee  direction = "down"  onMouseOver = "this.stop()"  onMouseOut = "this.start()" >这里是滚动字幕</ marquee >
</ body >

滚动字幕也支持图片的滚动,将文字换位图片即可。

目录
相关文章
|
JavaScript
Threejs实现标签,自定义样式显示标签
Threejs实现标签,自定义样式显示标签
1147 0
Threejs实现标签,自定义样式显示标签
|
前端开发
CSS文字溢出显示省略号,且出现title或者tooltip
CSS文字溢出显示省略号,且出现title或者tooltip
1518 0
CSS文字溢出显示省略号,且出现title或者tooltip
|
前端开发 开发者 容器
CSS 自适应内容宽度的输入框
CSS 自适应内容宽度的输入框
CSS 自适应内容宽度的输入框
|
4月前
标签添加背景图
标签添加背景图
35 0
|
4月前
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
|
8月前
|
前端开发
css使文字显示两行后显示省略号
css使文字显示两行后显示省略号
51 0
|
11月前
|
JavaScript 前端开发 Java
字体标签
字体标签全家桶
|
11月前
|
前端开发
div标签中的span标签,多行文字水平,垂直居中
div标签中的span标签,多行文字水平,垂直居中
106 0
|
开发者
段落标签与水平线标|学习笔记
快速学习段落标签与水平线标
段落标签与水平线标|学习笔记
|
前端开发 iOS开发
文字样式处理总结
文字样式处理总结
文字样式处理总结