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

    基于 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()

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

    具体代码示例如下：

    1. // 滚动方向 direction
    3. <marquee direction="up">我想上滚动marquee>
    4. --------------------------------------------------------------------------------
    5. // 滚动方式 behavior
    7. <marquee behavior="slide">我只滚动一次marquee>
    8. --------------------------------------------------------------------------------
    9. // 滚动速度 scrollamount
    11. <marquee scrollamount="5">我是速度为5的滚动marquee>
    12. --------------------------------------------------------------------------------
    13. // 滚动延迟 scrolldelay
    15. <marquee scrolldelay="90">我延迟滚动marquee>
    16. --------------------------------------------------------------------------------
    17. // 滚动循环 loop
    19. <marquee loop="2">我是loop循环滚动marquee>
    20. --------------------------------------------------------------------------------
    21. // 滚动背景颜色 bgcolor
    22. // 宽100px 高90px 背景色为 #f5f5f5 的滚动区域
    23. <marquee direction="up" width="100" height="90" bgcolor="#f5f5f5" >
    24.     <p>开发工程师p>
    25.     <p>设计师p>
    26.     <p>前端开发p>
    27. marquee>
    28. --------------------------------------------------------------------------------
    29. // 滚动空间 hspace-水平边距 vspace-垂直边距
    30. <marquee direction="up" width="50" hspace="20" vspace="10" >
    31.     <p>开发工程师p>
    32.     <p>设计师p>
    33.     <p>前端开发p>
    34. marquee>
    35. --------------------------------------------------------------------------------
    36. // 滚动事件
    37. // 鼠标悬停，滚动停止   鼠标离开，滚动继续
    38. <marquee direction="up" οnmοuseοver="this.stop()" οnmοuseοut="this.start()">
    39.     <p>开发工程师p>
    40.     <p>设计师p>
    41.     <p>前端开发p>
    42. marquee>

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

    示例结果图：

    此图为效果图

     项目使用 ：

    2.  
    3. <script>
    4. export default {
    5.   data() {
    6.     return {
    7.       subtitle: "滚动字幕 == 滚动字幕 == 滚动字幕",
    8.     };
    9.   },
    10. };
    11. script>
    12.  
    13. <style lang="scss" scoped>
    14. div {
    15.   position: relative;
    16.   .subtitle {
    17.     position: absolute;
    18.     top: -28px;
    19.     left: 22%;
    20.     color: skyblue;
    21.     font-size: 20px;
    22.     font-weight: 700;
    23.   }
    24. }
    25. style>
  • 相关阅读:
    Mysql服务器数据还原/同步到本地数据库失败解决办法
    力扣(LeetCode)12. 整数转罗马数字(C++)
    利用Spring Boot框架做事件发布和监听
    微服务网关之Zuul1.0上
    Flutter的Constructors for public widgets should have a named ‘key‘ parameter警告
    package.json中workspaces详解与monorepo
    《从零开始学架构》读书笔记(下)
    怎样将PPT转成文本格式？PPT文本一键生成文本格式 工作经验分享
    MEGC(FACIAL MICRO-EXPRESSION GRAND CHALLENGE)微表情识别比赛相关网站
    Leetcode55&&LeetCode45
  • 原文地址：https://blog.csdn.net/weixin_58099903/article/details/126018094