基于jQuery的text文字显示特效应用 - Web前端
作者：98wpeu发布时间：2026-09-23分类：网页前端技术浏览：1
导读：回顾上篇文章“谈谈Text的一些交互体验”，其中提到文字的特效：打字效果，今天主要分享如何实现这种酷炫的效果。我们需要用到一款插件：TheaterJS。TheaterJS能逼真模拟...
回顾上篇文章“谈谈Text的一些交互体验”，其中提到文字的特效：打字效果，今天主要分享如何实现这种酷炫的效果。
我们需要用到一款插件：TheaterJS。TheaterJS能逼真模拟打字特效应用。
使用方法
可以使用下面的js代码来调用TheaterJS制作打字机效果：
var theater = new TheaterJS();
theater
.describe("Vader", .8, "#vader")
.describe("Luke", .6, "#luke");
theater
.write("Vader:Luke.", 600)
.write("Luke:What?", 400)
.write("Vader:I am...", 400, " your father.");
theater
.on("say:start, erase:start", function () {
// add blinking caret
})
.on("say:end, erase:end", function () {
// remove blinking caret
})
.on("*", function () {
// do something
});多重角色
使用TheaterJS，你可以建立多个角色，每个角色都有自己的“经验”，它们使用这些“经验”可以互相“交谈”。
theater.describe("Vader", .8, "#vader");上面的代码描述了一个新的角色，名字叫“Vader”，它的“经验”值为0.8（必须是0-1之间），它的voice是“#vader”。voice将用于打印的文字，Vader是一个html元素。
voice可以是两种类型：
一个HTML元素（或一个CSS选择器），元素的
innerHTML将被用于设置voice。用4个参数调用的函数：
newvalue：新的speech值。
newchar：新的打印字符。
PRevChar：前一个字符。
speech：所有的speech。
注意：当TheaterJS调用了这些函数，上下文this被设置为当前对象。
创作剧本
TheaterJS实际上是在创建一个剧本。
theater
.write("Vader:I am your father.")
.write(" For real....")
.write(-1)
.write(600)
.write(function () { /* do something */ });注意：write方法接收不定数量的参数。
theater
.write("Vader:Hello!")
.write("How are you doing?");等效于
theater.write("Vader:Hello!", "How are you doing?");设置 actor 和 speech
theater.write("Vader:I am your father.");write方法的参数是以角色的名字为前缀的字符串。它实际上添加了三个场景：
| 场景名称 | 描述 |
| actor | Set the current speaking actor to the passed one. |
| erase | Erase the current speech value. |
| actor | type the speech. |
场景对象
theater
.write("Vader:I am your father.")
.write(" For real....")
.write(-1)
.write(600)
.write(function () { /* do something */ });它等效于
theater
.write({ name: "actor", args: ["Vader"] })
.write({ name: "erase", args: [] })
.write({ name: "say", args: ["I am your father."] })
.write({ name: "say", args: [" For real...."] })
.write({ name: "erase", args: [-1] })
.write({ name: "wAIt", args: [600] })
.write({ name: "call", args: [function () { /* do something */ }] });事件
TheaterJS有一些内置的事件。
theater
.on("say:start", function (event, args...) {
console.log("a say scene started");
})
.on("say:end", function (event, args...) {
console.log("a say scene ended");
});在 : 之前的值是事件的作用域，其它部分是事件本身。要添加一个事件监听，可以使用逗号隔开它们。
theater
.on("say:start, erase:start", function (event) {
// add blinking caret
})
.on("say:end, erase:end", function () {
// remove blinking caret
});如果你想监听所有的事件，使用theater.on("*", function (event, realEvent, args...) {});方法。
公共方法
theater
.Emit("scope", "event", ["your", "arguments", "go", "here"])
.emit("customEvent", ["you might not need the event part"]);emit方法接收三个参数：第一个是作用域，第二个是事件，第三个是参数。
案例
掌握上面的基础知识，我们再回顾下上篇文章的例子：
<!doctype html><head><meta charset="utf-8"><meta http-eqUIv="X-UA-Compatible" content="ie=Edge,Chrome=1"><title>移动支付正在维护中 - Web前端之家</title><meta name="keywords" content="" /><meta name="description" content="" /><meta name="vIEwport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=0" /><link href="/demo/dazi/d1/css/lp228.css" rel="StyleSheet" type="text/css"></head><body><script type="text/javascript">
function recalc() {
var x = 750,clientWidth = document.body.clientWidth;
if (!clientWidth) return;
document.documentElement.style.fontsize = 100 * (clientWidth / x) + 'px';
};
if (window.addEventListener) {
recalc();
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
window.addEventlistener(resizeEvt, recalc, false);
}</script><div class="cen-loading-box">
<p class="cen-p-fon">移动支付正在维护中，带来不便，敬请谅解</p>
<p class="cen-p-fon2">请您用<strong>电脑登录客户中心</strong>进行存款</p>
<div class="cen-comp-box scene">
<div class="inp-fon" id="vader"></div>
</div>
<pre id="nodebug" style="display:none"><Code>
theater.write( <span id="log"></span>
); </code></pre></div><script src="/demo/js/jq.js"></script><script src="/demo/dazi/d1/js/theater.min.js"></script><script type="text/JavaScript">
(function () {
"use strict";
var $log = document.querySelector("#log");
var theater = new TheaterJS();
theater .describe("Vader", .8, "#vader");
theater .on("*", function (eventName, originalEvent, sceneName, arg) {
var args = Array.prototype.splice.apply(Arguments, [3]),
log = '{\n name: "' + sceneName + '"';
if (args.length > 0) log += ",\n args: " + JSON.stringify(args).split(",").join(", ");
log += "\n }";
$log.innerHTML = log;
})
.on("say:start, erase:start", function (eventName) {
var self = this,
current = self.current.voice;
self.utils.addClass(current, "saying");
})
.on("say:end, erase:end", function (eventName) {
var self = this,
current = self.current.voice;
self.utils.removeClass(current, "saying");
});
theater .write("Vader:WEB前端之家", 2000)
.write(function () { theater.play(true); });
})();</script></body></html>本段代码来自 https://www.jiangweishan.com/article/textBasicYingyong.html是不是感觉一目了然了呢。
总结
文字的特效有很多，TheaterJS是我比较喜欢的一种，如果您有更好的，可以分享出来，一起学习探讨！！！记得加入我们前端群295431592。
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 8分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 9在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性