前端如何实现一个滚动的文本字幕

基于 HTML 的 marquee 标签实现文字滚动 / 字幕播放

marquee 标签介绍：
可以实现文字

滚动方向 direction 、滚动方式 behavior 、滚动速度 scrollamount 、

滚动延迟 scrolldelay 、滚动循环 loop 、滚动空间、滚动事件等。

1、direction 表示滚动的方向，

值可以是 left，right，up，down，默认为 left
2、behavior 表示滚动的方式，

值可以是 scroll（连续滚动）； slide（滑动一次）； alternate（往返滚动）

3、loop 表示循环的次数，

值是正整数，默认为无限循环
4、scrollamount 表示运动速度，

值是正整数，默认为 6
5、scrolldelay 表示停顿时间，

值是正整数，默认为 0 ，单位似乎是毫秒
6、align 表示元素的垂直对齐方式，

值可以是 top，middle，bottom，默认为 middle
7、bgcolor 表示运动区域的背景色，

值是 16进制的 RGB 颜色，默认为白色
8、height、width 表示运动区域的高度和宽度，

值是正整数（单位是像素）或百分数，默认 width=100% height 为标签内元素的高度
9、hspace、vspace 表示元素到区域边界的水平距离和垂直距离，

值是正整数，单位是像素。
10、οnmοuseοver=this.stop() οnmοuseοut=this.start()

表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

具体代码示例如下：
// 滚动方向 direction

<marquee direction="up">我想上滚动</marquee>
--------------------------------------------------------------------------------
// 滚动方式 behavior

<marquee behavior="slide">我只滚动一次</marquee>
--------------------------------------------------------------------------------
// 滚动速度 scrollamount

<marquee scrollamount="5">我是速度为5的滚动</marquee>
--------------------------------------------------------------------------------
// 滚动延迟 scrolldelay

<marquee scrolldelay="90">我延迟滚动</marquee>
--------------------------------------------------------------------------------
// 滚动循环 loop

<marquee loop="2">我是loop循环滚动</marquee>
--------------------------------------------------------------------------------
// 滚动背景颜色 bgcolor
// 宽100px 高90px 背景色为 #f5f5f5 的滚动区域
<marquee direction="up" width="100" height="90" bgcolor="#f5f5f5" >开发工程师设计师前端开发
</marquee>
--------------------------------------------------------------------------------
// 滚动空间 hspace-水平边距 vspace-垂直边距
<marquee direction="up" width="50" hspace="20" vspace="10" >开发工程师设计师前端开发
</marquee>
--------------------------------------------------------------------------------
// 滚动事件
// 鼠标悬停，滚动停止 鼠标离开，滚动继续
<marquee direction="up" οnmοuseοver="this.stop()" οnmοuseοut="this.start()">开发工程师设计师前端开发
</marquee>

<html><head><title>实现滚动字幕</title></head><body><center><marquee behavior="scroll"     direction="left"               bgcolor="#43789B"     loop="-1" scrollamount="30"     scrolldelay="400"width=99%  height="40" style="line-height: 45px">假如生活欺骗了你， 不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。 一切都是瞬息，一切都将会过去； 而那过去了的，就会成为亲切的怀恋。</marquee></center></body>
</html>

示例结果图：

项目使用：

<template><div><!-- 滚动字幕 --><div class="subtitle"><marqueebehavior="scroll"width="1000px"onmouseout="this.start()"onmouseover="this.stop()">{{ subtitle }}</marquee></div></div>
</template><script>
export default {data() {return {subtitle: "滚动字幕 == 滚动字幕 == 滚动字幕",};},
};
</script><style lang="scss" scoped>
div {position: relative;.subtitle {position: absolute;top: -28px;left: 22%;color: skyblue;font-size: 20px;font-weight: 700;}
}
</style>

前端如何实现一个滚动的文本字幕相关推荐

创建一个滚动的文本字幕。
direction 表示滚动的方向,值可以是left,right,up,down,默认为left behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alterna ...
Mini字幕滚动器/迷你字幕滚动器(企业版/试用版)v2.2 最新版
软件介绍: 1.支持导入导出播放字幕内容. 2.支持速度/宽度/高度/长度调整. 3.字体颜色支持3种颜色的实时循环. 4.显示框支持随时修改背景颜色. 5.显示框支持前端/普通/强制前端显示方式. ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
python滚动文本框_调整滚动Tkinter文本框的大小
我想要一个滚动的Tkinter文本框来填充最大的分配空间.我有点工作...在由于某些原因,当我拉伸窗口时,文本小部件很好:但是,滚动条在x轴上有大量的填充.在第二个问题是当我缩小窗口时,屏幕上的滚 ...
文本域、标签、密码域、文本区、滚动窗格——文本输入
文本域将文本域添加到窗口的常用办法就是将它添加到面板或者其他的容器中: JPanel panel = new JPanel(); JTextField textField = new JTextFi ...
[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
[前端笔记--HTML介绍] 4.HTML文本基础+超链接+高级文本格式 1.HTML文本基础 1.1标题和段落 1.2列表 1.2.1无序列表(unordered) 1.2.2有序列表(ordere ...
pytorch时空数据处理2——图像转文本/字幕Image-Captionning（一）
pytorch时空数据处理2--图像转文本/字幕Image-Captionning(一) pytorch时空数据处理2--图像转文本/字幕Image-Captionning(一) 最终目标主要技术概 ...
[内部项目]i前端如何增加一个页面
i 的前端如何增加一个新页面呢? 要改很多地方: (1)pathMap.js 路径:js/pathMap.js 说明:key表示url访问路径,value表示接口路径和js文件名称 (2)Header ...
前端如何搭建一个成熟的脚手架
前言有了之前的基础(前端如何搭建一个简单的脚手架),我们现在可以讲讲一个成熟的脚手架是怎么做了. 这里我们参考vue-cli的源码,基于rollup和typescript一步步搭建.vue-cli作 ...

前端如何实现一个滚动的文本字幕

示例结果图：

前端如何实现一个滚动的文本字幕相关推荐

最新文章

热门文章