Jquery模仿出打字效果出来

2023-12-18 16:29:37

我们定好一段文字，然后让文字一个字一个字出来，像打字的效果一样，下面代码直接复制，然后直接看效果吧。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .dynamic-text {
      font-size: 24px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      border-right: .15em solid orange;
    }
  </style>
  <title>Dynamic Text</title>
</head>

<body>
  <div class="dynamic-text" id="dynamicText">选完后点击右上角的购物车图标</div>

  <script src="./WTC/suidao-en/js/jquery.min.js"></script>
  <script>
    $(function () {
      function animateText() {
        var text = $('#dynamicText').text();
        var length = text.length;
        var delay = 100; // 每个字符显示的延迟时间
        var textIndex = 0;
        var isTyping = true; // 标识文字是否正在显示
        var isHiding = false; // 标识文字是否正在隐藏

        function typeText() {
          if (textIndex < length && isTyping) {
            $('#dynamicText').text(text.substring(0, textIndex + 1));
            textIndex++;
            setTimeout(typeText, delay);
          } else {
            isTyping = false; // 文字显示完成
            isHiding = true; // 准备开始隐藏文字
            setTimeout(eraseText, 1000); // 文字停顿1秒后开始隐藏
          }
        }

        function eraseText() {
          if (textIndex >= 0 && isHiding) {
            $('#dynamicText').text(text.substring(0, textIndex));
            textIndex--;
            setTimeout(eraseText, delay);
          } else {
            isTyping = true; // 开始重新显示
            isHiding = false; // 停止隐藏
            textIndex = 0; // 重置 textIndex
            setTimeout(typeText, 1000); // 文字停顿1秒后开始显示
          }
        }

        typeText();
      }

      animateText();
    });
  </script>
</body>

</html>

文章来源:https://blog.csdn.net/m0_63873004/article/details/135063543
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。