滚动字幕带有暂停功能

！执行

已于 2022-08-27 12:53:12 修改

阅读量334

点赞数 2

文章标签： javascript html5 css3 es6

于 2022-08-27 12:41:12 首次发布

本文链接：https://blog.csdn.net/sj18838107211/article/details/126556432

版权

HTML内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

        html,

        body {

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

    <div id="lickdog-out_wrap">

        <div>

            <script>

                (async function () {

                    const lickdog = await import('./index.js')

                    lickdog.lick(

                

                        [

                            "问题到我为止，改变从我开始",

                            "人在一起叫聚会，心在一起叫团队",

                            "工作创造价值，奉献带来快乐，态度决定一切",

                            "怠惰是贫穷的制造厂",

                            "一个优秀的员工必须培养自己对工作的兴趣，使工作成为愉快的旅程",

   

                        ],

                         {

                            speed: 1,

                            enableBeautify: true,

                        }

                    )

                })()

            </script>

</body>

</html>

js内容

export function lick(lickdogWords,config) {



console.log("代码执行了",config)

  setupStyle();

  // 偏移值

  let left = 0;

  //声明定时器

  let timer = null;

  // 文字

  let lickWord = lickdogWords;



  const out = document.querySelector("#lickdog-out_wrap");

  console.log(out)

  out.innerHTML = `

    <div id="lickdog-inner_wrap">

        <div class="text" id="text-before">${lickWord}</div>

        <div class="text" id="text-after">${lickWord}</div>

    </div>

  `;



  const inner = document.querySelector("#lickdog-inner_wrap");

  const textBefore = document.querySelector("#text-before");



  init();

  setupEvent();



    // 初始化

  function init() {

    // 开启定时器之前最好先清除一下定时器

    clearInterval(timer);

    //开始定时器

   console.log(config)

    const speed = config?.speed ?? 10;

    console.log(speed)

    timer = setInterval(move,10);

  }

  function setupEvent() {

    // 如果遇到自己喜欢的句子，不妨空格⏸，让老板多看看

    document.onkeydown = function (e) {

      var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值

      if (keyNum == 32) {

        if (timer) {

          clearInterval(timer);

          timer = null;

        } else {

          timer = setInterval(move, config.speed);

        }

      }

    };

  }



  function setupStyle() {

    const styleTag = document.createElement("style");

    styleTag.type = "text/css";

    styleTag.innerHTML = `

    #lickdog-out_wrap{

        width: 100%;

        height: 100px;

        position: fixed;

        overflow: hidden;

        text-overflow: ellipsis;

        /* 颜色一定要鲜艳 */

        background-color: #ff0000;

        border-radius: 8px;

        /* 阴影也一定要够醒目 */

        box-shadow: rgba(255, 0, 0, 0.4) 5px 5px, rgba(255, 0, 0, 0.3) 10px 10px, rgba(255, 0, 0,         0.2) 15px 15px, rgba(255, 0, 0, 0.1) 20px 20px, rgba(255, 0, 0, 0.05) 25px 25px;

    }

    #lickdog-inner_wrap {

        // padding: 0 12px;

        width: 100%;

        height: 100%;

        display: flex;

        align-items: center;

        position: absolute;

        left: 0;

        top: 0;

    }

    .text{

        white-space:nowrap;

        box-sizing: border-box;

        color: #fff;

        font-size: 48px;

        font-weight:bold;

        /* 文字一定要立体 */

        text-shadow:0px 0px 0 rgb(230,230,230),

        1px 1px 0 rgb(215,215,215),

        2px 2px 0 rgb(199,199,199),

        3px 3px 0 rgb(184,184,184),

        4px 4px 0 rgb(169,169,169),

        5px 5px 0 rgb(154,154,154),

        6px 6px 5px rgba(0,0,0,1),

        6px 6px 1px rgba(0,0,0,0.5),

        0px 0px 5px rgba(0,0,0,.2);

    }

    `;

    document.head.appendChild(styleTag)

  }

    //封装移动函数

  function move() {

    if (left >= textBefore.offsetWidth) {

      left = 0;

    } else {

      left++;

    }

    inner.style.left = `${-left}px`;

  }

}