Ticker Type Text（以前称为writeText）是一个简单、轻量级和可配置的文本旋转器插件，它通过一系列字符串旋转，具有类似打字机的打字和删除效果。

非常适合新闻播报器、推荐转盘、报价旋转器等。

如何使用它:

1.创建一系列要循环使用的句子。

<div class="tt-holder">
  <p class="tt">I LOVE JQUERYSCRIPT!</p>
  <p class="tt">I LOVE CSSSCRIPT!</p>
  <p class="tt">I LOVE VUESCRIPT!</p>
  <p class="tt">I LOVE REACTSCRIPT!</p>
  <h1 class="ttt"></h1>
</div>

2.在页面加载时隐藏内容。

.tt {
  display: none;
}

3.在键入和删除字符时，在句子末尾附加一个闪烁的光标。

.ttt::after {
  content : "\0020";
  animation: pulse 1s infinite;
  color: transparent;
  border-right: 3px solid black;
  margin-left: 4px;
}
 
@keyframes pulse {
  0% {
     border-right: 3px solid  black;
  }
  50% {
     border-right: 3px solid  transparent;
  }
  100% {
     border-right: 3px solid  black;
  }
}

4.在jQuery库之后加载主JavaScript。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/index.min.js"></script>

5.使用可见性API检查当前选项卡是否处于活动状态。

const vis = (function () {
  let stateKey,
    eventKey,
    keys = {
      hidden: "visibilitychange",
      webkitHidden: "webkitvisibilitychange",
      mozHidden: "mozvisibilitychange",
      msHidden: "msvisibilitychange"
    };
  for (stateKey in keys) {
    if (stateKey in document) {
      eventKey = keys[stateKey];
      break;
    }
  }
  return function (c) {
    if (c) document.addEventListener(eventKey, c);
    return !document[stateKey];
  }
})();

6.初始化插件并将以下参数传递给写入文本方法：

• 内容：容纳内容的容器
• 保留：键入和删除时要保留的字符数
• 秒：动画速度（秒）
• 延迟：延迟（毫秒）
• 迭代次数：迭代次数，0=无穷大
• 比例：输入转换和输出转换百分比（0-1）
• 第二季度：第二部分的动画速度
• 开发：启用开发模式
• 贫困目标：元素暂停文本旋转器
• 停止目标：元素来停止文本旋转器

// tickerText(contents, keep, seconds, delay = 20, iterations = 0, ratio, secondsout, dev = false, pausetarget, stoptarget);
let $elements = $(".tt-holder .tt");
$(".ttt").tickerText($elements, 8, 3, 30, 1, 0.5, 2, false, "timerpause", "timerstop");

更新日志：

2023-03-02

• v2.0.5版本

2023-02-17

• 使现代化

2021-08-27

• 稍作重构，将回调函数与html（）一起使用

1.0.0版（2021-08-21）

• 支持内联html元素的主要重新网站

预览截图

打字机效果 文本旋转 勾选类型文本