首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >标签之美六——滚动字幕的应用 原

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

作者头像
珲少
发布2018-08-15 14:43:47
9390
发布2018-08-15 14:43:47
举报
文章被收录于专栏:一“技”之长一“技”之长

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

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

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

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

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

slide:只滚动一次

alternate:左右来回滚动

2、设置字幕背景颜色

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

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

4、设置字幕的滚动速度

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

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

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

6、设置滚动次数

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

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

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

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

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015/05/14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 标签之美——滚动字幕的应用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档