实现逐字逐句显示文字的jQuery插件

最新推荐文章于 2023-12-11 10:44:45 发布

易之晓晓

最新推荐文章于 2023-12-11 10:44:45 发布

阅读量531

点赞数 1

本文链接：https://blog.csdn.net/qq_42306443/article/details/105219515

版权

reveal-it.js 插件描述：reveal-it.js是一个jQuery插件,它可以将文本从左到右生产淡入的效果。

jQuery Easing 是一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费

<!DOCTYPE html>
<html>
// 打字效果
<head>
  <title></title>
  <meta charset="utf-8" />
  <style>
    .aaa {
      text-indent: 6px;
    }
  </style>
</head>

<body>

  <div id="source">
    打印带有标签的段落
    <p>我是段落</p>
    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ul>
    <div class="aaa">545454wo bu 到时候 在说</div>
  </div>
  <div id="output">
    sadaddadsa
  </div>

  <script type="text/javascript">
    class Typing {
      constructor(opts) {
        this.opts = opts || {};
        this.source = opts.source;
        this.output = opts.output;
        this.delay = opts.delay || 120;
        this.chain = {
          parent: null,
          dom: this.output,
          val: []
        };
        if (!(typeof this.opts.done === 'function')) this.opts.done = function () {};
      }

      init() {
        //初始化函数
        this.chain.val = this.convert(this.source, this.chain.val);
      }

      convert(dom, arr) {
        //将dom节点的子节点转换成数组，
        let children = Array.from(dom.childNodes)
        for (let i = 0; i < children.length; i++) {
          let node = children[i]
          if (node.nodeType === 3) {
            arr = arr.concat(node.nodeValue.split('')) //将字符串转换成字符串数组，后面打印时才会一个一个的打印
          } else if (node.nodeType === 1) {
            let val = []
            val = this.convert(node, val)
            arr.push({
              'dom': node,
              'val': val
            })
          }
        }
        return arr
      }

      print(dom, val, callback) {
        setTimeout(function () {
          dom.appendChild(document.createTextNode(val));
          callback();
        }, this.delay);
      }

      play(ele) {
        //当打印最后一个字符时，动画完毕，执行done
        if (!ele.val.length) {
          if (ele.parent) this.play(ele.parent);
          else this.opts.done();
          return;
        }
        let current = ele.val.shift() //获取第一个元素，同时删除数组中的第一个元素
        if (typeof current === 'string') {
          this.print(ele.dom, current, () => {
            this.play(ele); //继续打印下一个字符
          })
        } else {
          let dom = current.dom.cloneNode() //克隆节点，不克隆节点的子节点，所以不用加参数true
          ele.dom.appendChild(dom)
          this.play({
            parent: ele,
            dom,
            val: current.val
          })
        }
      }

      start() {
        this.init();
        this.play(this.chain);
      }
    }
  </script>
  <script type="text/javascript">
    let source = document.getElementById('source')
    let output = document.getElementById('output')
    let typing = new Typing({
      source,
      output
    })
    typing.start()
  </script>
</body>

</html>