极客教程jQuery打字插件
Typed.js是一个jQuery插件，用于给我们的文本带来打字机的效果。typed.js提供的各种功能是。
- 自定义打字速度。
- 自定义退格速度。
- 支持循环（也支持无限循环）。
要使用这个插件，只需在正文标签上方添加CDN链接即可。
CDN链接键入插件：
<script src=”https://cdn.jsdelivr.net/npm/typed.js@2.0.11″></script>
HTML代码：在HTML中，我们只是添加了一个具有正常结构的h1标签来执行jQuery中的打字插件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>jQuery | Typing Plugins</title>
</head>
<body>
<h1 class="geeks"></h1>
</body>
</html>
CSS代码：对于样式设计，我们必须将我们的文本对齐到页面的中心。
<style>
body {
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: Black;
}
</style>
JavaScript代码：在JS中，我们有一个TYPED的对象，我们在其中传递了h1标签的类。然后我们有一个带有四个属性的对象。让我们逐一了解它们。
- string。它需要N个字符串，你希望你的效果被应用在这些字符串上。在我们的例子中，我们使用了两个字符串。
- typeSpeed：用于设置文本的输入或显示速度。
- backSpeed：用于设置文本的退格或消失速度。
- loop。它是一个布尔属性。我们把它设置为 “真”，以达到循环的效果。
- JS 代码:
<script>
var typed = new Typed(".geeks", {
strings: ["Hello!!!",
"A Computer Science Portal for Geeks"],
typeSpeed: 50,
backSpeed: 50,
loop: true,
});
</script>
最终解决方案：它是上述三部分代码与CDN链接的组合。
- Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>jQuery | Typing Plugins</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: Black;
}
</style>
</head>
<body>
<h1 class="geeks"></h1>
<script src=
"https://cdn.jsdelivr.net/npm/typed.js@2.0.11">
</script>
<script>
var typed = new Typed(".geeks", {
strings: ["Hello!!!",
"A Computer Science Portal for Geeks"],
typeSpeed: 50,
backSpeed: 50,
loop: true,
});
</script>
</body>
</html>
- 输出:
