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

雨季mo浅忆

已于 2022-08-01 16:21:20 修改

阅读量2.4k

点赞数 3

分类专栏：前端 CSS 文章标签：前端 html

于 2022-07-29 00:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/126018094

版权

前端同时被 2 个专栏收录

155 篇文章 29 订阅

订阅专栏

CSS

13 篇文章 1 订阅

订阅专栏

基于 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">
      <marquee
        behavior="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>

雨季mo浅忆

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
前端如何实现一个滚动的文本字幕

前端如何实现一个滚动的文本字幕基于 HTML 的 marquee 标签实现文字滚动 / 字幕播放marquee 标签介绍：可以实现文字滚动方向 direction 、滚动方式 behavior 、滚动速度 scrollamount 、滚动延迟 scrolldelay 、滚动循环 loop 、滚动空间、滚动事件等。......
复制链接

扫一扫