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

简介:

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

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

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

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

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

slide:只滚动一次

alternate:左右来回滚动

2、设置字幕背景颜色

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


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 >

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

目录
相关文章
|
12月前
|
机器学习/深度学习 自然语言处理 搜索推荐
智能语音识别技术的现状与未来发展趋势####
【10月更文挑战第21天】 本文深入探讨了智能语音识别技术的发展脉络、当前主要技术特点及面临的挑战,并展望了其未来的发展趋势。通过分析传统声学模型与深度学习技术的融合、端到端建模的兴起以及多模态交互的探索,揭示了智能语音识别技术向更高精度、更强鲁棒性迈进的必然趋势。同时,文章也指出了数据隐私、噪声干扰等挑战,并提出了相应的解决方案和研究方向,为智能语音识别技术的未来发展提供了参考。 ####
889 1
|
数据采集 安全 数据处理
制造业、工程设计行业、创投行业的数据治理痛点与解决方案
关注监管政策动态:密切关注数据治理相关法律法规的发布和更新,及时调整企业数据治理策略,确保合规经营。
制造业、工程设计行业、创投行业的数据治理痛点与解决方案
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
三行代码实现实时语音转文本,支持自动断句和语音唤醒,用 RealtimeSTT 轻松创建高效语音 AI 助手
RealtimeSTT 是一款开源的实时语音转文本库,支持低延迟应用,具备语音活动检测、唤醒词激活等功能,适用于语音助手、实时字幕等场景。
2162 18
三行代码实现实时语音转文本,支持自动断句和语音唤醒,用 RealtimeSTT 轻松创建高效语音 AI 助手
|
监控 算法 自动驾驶
计算机视觉的实践与挑战:技术深度剖析
【8月更文挑战第21天】计算机视觉技术作为人工智能的璀璨明珠,正逐步深入到我们生活的各个方面,带来前所未有的便利和变革。然而,随着技术的不断发展,我们也面临着诸多挑战和问题。未来,我们需要不断推动技术创新和跨学科合作,加强数据安全和隐私保护,提升算法的鲁棒性和可解释性,以应对这些挑战并推动计算机视觉技术的持续发展。让我们共同努力,探索计算机视觉技术的广阔天地,为创造一个更加智能、安全和美好的世界而不懈努力。
|
存储 网络协议 文件存储
【超强笔记软件】Obsidian实现免费无限流量无套路云同步(三)
【超强笔记软件】Obsidian实现免费无限流量无套路云同步(三)
810 0
|
开发框架 .NET C#
Visual Studio Code调试和发布ASP.NET Core Web应用
Visual Studio Code调试和发布ASP.NET Core Web应用
300 0
|
NoSQL 安全 Java
redis三个连接客户端框架的选择:Jedis,Redisson,Lettuce
redis三个连接客户端框架的选择:Jedis,Redisson,Lettuce
1688 0
下一篇
开通oss服务