天天看点
返回

【前端库】typed.js 打字机效果案例地方单击我看效果手册

官方github

官方网站：

bootstrap CDN

案例地方单击我看效果

前提

引入js库 
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>

手册

官方手册

new Typed()

使用new实例化 
new Typed('参数一','参数二');
Typed参数 参数说明
参数一 obj类型，元素对象，将文字放入元素内，进行看效果，注意：如果是div的话，块级标签，最好转换为内联，display: inline;
参数二 json类型，参数如下：
Typed参数二的参数 参数说明
strings 数组类型,里面存放文本内容，输出的文本。从下标0开始，打印第一个，从新覆盖，打印出第二个。注意：输出标签时，在input会直接输出标签，如果在一个div内，会当标签执行掉
stringsElement 不知道是啥，官方没有给答案
typeSpeed number类型，打印的速度。数值越大，速度越慢。
startDelay number类型，前面延迟时间（不用写单位，默认是ms毫秒）
backSpeed number 类型，往后退（跟删除差不多，相当于我们按backSpace键，不是删除，而是退后。del键是删除），打印第一段后，便后退速度多少秒。单位毫秒。
shuffle boolean类型，不知道是啥
smartBackspace boolean类型，不知道是啥
backDelay number类型，当要后退的时候，延迟时间后才后退，值越大，延迟的时间就越长。
fadeOut boolean类型，开启运动效果，和下面的fadeOutClass和fadeOutDelay才能看出效果
fadeOutClass string 类型，比如：'typed-fade-out’值
fadeOutDelay number 类型，设置淡出为毫秒为单位。
loop boolean布尔类型，设置循环，为真，开启循环。和下面loopCount一起使用，才能弄出效果
loopCount 设置循环次数，值为：Infinity（不是字符串，直接粘贴过去使用）时, 便会无限循环。也可以使用数值
showCursor boolean类型，默认开启光标，为真开启，那么还得设置css将元素设置为内联元素即可。
cursorChar string类型，光标的符号，比如：’^’
autoInsertCss true 类型，将光标插入到html中
attr string类型， 可以将文本输入到输入框placeholder属性中，也可以输入框的value值里面，还可以输入到html文本（值就是null默认），最后还有可以自定义个html属性中显示打印效果（可以在控制台中显示）
bindInputFocusEvents boolean类型，为真，在输入框中，如果是打印的时候，把光标进入焦点后，则停止打印。默认是为假，进入输入框焦点则不停止打印。
contentType string类型，有两个参数：‘html’或者’null’，默认是html，值为html时，将打印的文本标签直接解析html标签。如果是’null’则，将直接输出标签字符串。
onComplete function 类型，当打印完成后，执行回调函数，接收一个参数是全局对象，里面有很多设置方法属性。
preStringTyped function 类型，在字符串打印出来之前，回调函数。接收两个参数，第一个是arrayPos的值，第二个是全局对象，和上面一样。
onStringTyped function 类型，在打印输出字符串之后。接收两个参数，参数一：是arrayPos值。参数二：全局对象，和上面一样 没成功
onLastStringBackspaced function类型，在循环打印输出到最后一个字符串之后触发回调函数。所以这里必须得设置循环属性才可以。没成功
onTypingPaused function类型，打印停止才会触发。当onStop()实现停止了后才触发。
onTypingResumed function 类型，打字在停止后才开始触发。当onStop()实现停止了后才触发。
reset() 方法，重置后。可以通过实例化后的对象，进行调用此方法
stop() 方法，停止。可以通过实例化后的对象，可以通过实例化后的对象，进行调用此方法
start() 方法，开始。可以通过实例化后的对象，可以通过实例化后的对象，进行调用此方法
toggle() 方法，用于切换onStop与onStart之间。可以通过实例化后的对象，进行调用此方法
destroy() 方法，如果是不在使用此对象，那么可以使用这个方法销毁实例对象。并没有删除实例化对象，实际功能是销毁当前的对象内容 ，但是也不算是销毁，还能单击开始，有点像是重置

设置光标闪动，必须得加上css样式，还得在js里面将打印出来的文字内添加 ^1000 

.typed-cursor{
  opacity: 1;
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
  animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
  50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}
.typed-fade-out{
  opacity: 0;
  transition: opacity .25s;
  -webkit-animation: 0;
  animation: 0;
}

光标闪烁的实例 

<style>
    .typed-cursor{
      opacity: 1;
      animation: typedjsBlink 0.7s infinite;
      -webkit-animation: typedjsBlink 0.7s infinite;
      animation: typedjsBlink 0.7s infinite;
    }
    @keyframes typedjsBlink{
      50% { opacity: 0.0; }
    }
    @-webkit-keyframes typedjsBlink{
      0% { opacity: 1; }
      50% { opacity: 0.0; }
      100% { opacity: 1; }
    }
    .typed-fade-out{
      opacity: 0;
      transition: opacity .25s;
      -webkit-animation: 0;
      animation: 0;
    }
</style>
<div id="element"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
	var options = {
	// 闪烁光标必须得有：上面的css和下面字符串内添加 ^1000 ，只要是当输入到^1000就解析闪烁的时间，1000ms。
	  strings: ["<i>我是第一段</i>哦哦哦 ^1000 哦！", "我是第二段",'我是第三段'],
	  typeSpeed: 40
	}
	var typed = new Typed("#element", options);
</script>

strings 与 typeSpeed 

<div id="element"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
	var options = {
	// 
	  strings: ["<i>我是第一段</i>哦哦哦哦！", "我是第二段",'我是第三段'],
	  typeSpeed: 40
	}
	var typed = new Typed("#element", options);
</script>

startDelay 运行后，延迟多少毫秒在开始出效果 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#text,#element {
			width: 100%;
			display: block;
		}
	</style>
</head>
<body>
	<div id="element"></div>
	<input type="text"  id="text" name="">
	<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
	<script type="text/javascript">
		var options = {
		  strings: ["<h2>下面的还没出来</h2>哦！", "我都第二段了",'我不延时我不延时我不延时我不延时我不延时'],
		  typeSpeed: 80,
		  startDelay: 1000 // 延时一秒后在执行
		}
		var option = {
		  strings: ["<h2>我是第一段</h2>！", "我是第二段",'我延时，我延时，我延时，我延时，我延时，我延时，我延时，我延时，我延时，'],
		  typeSpeed: 80
		}
		// console.log(new start());
		var typed = new Typed("#text", options);
		var typed = new Typed("#element", option);
	</script>
</body>
</html>

contentType 设置标签解析 

<span id="element1"></span>
<span id="element2"></span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
	var options = {
	  strings: ["<h2>我是H2标签</h2>！", "'],
	  typeSpeed: 80,
	  contentType : 'null' // 将标签
	}
	var typed = new Typed("#element1", options);
	
	var option = {
	  strings: ["<h2>我是H2标签</h2>！", "],
	  typeSpeed: 80,
	  contentType : 'null' // 将标签
	}
	var typed = new Typed("#element2", option);
</script>

调用 toggle()、start()、stop()、reset() 

<span id="element"></span>
<br />
<button id="btn1">开始打印</button>
<button id="btn2">暂停打印</button>
<button id="btn3">暂停或者开始</button>
<button id="btn4">重置</button>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var btn3 = document.getElementById('btn3');
    var btn4 = document.getElementById('btn4');
	var option = {
	  strings: ['我是字符串内我是字符串内我是字符串内我是字符串内我是字符串内我是字符串内>'],
	  typeSpeed: 80,
	  loop:true,
	  loopCount:Infinity
	}
	var typed = new Typed("#element", option);
	btn1.onclick = function () {
	    typed.start();
	}
	btn2.onclick = function () {
	    typed.stop();
	}
	btn3.onclick = function () {
	    typed.toggle();
	}
	btn4.onclick = function () {
	    typed.reset();
	}
</script>

由于本人不会组织语言，有不足地方或不理解地方可以说。看到了一定回复。

库酷 插件 前端 技巧 typed-js 前端框架 js库 打字机效果 前端打字机效果
上一篇: 打字机打字，退格效果
下一篇: html页面文字打字机效果--js实现

继续阅读