-

打字效果的JS库TheaterJS

WEB前端

在之前的文章里也介绍了一个打字效果的jQuery插件-typer.js。今天再给大家分享一个模拟人类打字的js插件TheaterJS,TheaterJS功能更加丰富,包含多个角色管理、事件处理等。

1、引入TheaterJS.js
[cc lang=”html” escaped=”true”]<script src=”path/to/theater.js”></script>[/cc]

2、TheaterJS.js的使用
[cc lang=”html” escaped=”true”]<div id=”raykaeso”></div>
<div id=”leixuesong”></div>[/cc]

[cc lang=”html” escaped=”true”]<script src=”path/to/theater.js”></script>
<script>
//TheaterJS初始化
var theater = new TheaterJS();

//描述角色
theater
.describe(“raykaeso”, .8, “#raykaeso”)
.describe(“leixuesong”, .6, “#leixuesong”);

// 写剧本
theater
.write(“raykaeso:leixuesong.”, 600)
.write(“leixuesong:What?”, 400)
.write(“raykaeso:I am…”, 400, ” your friend.”);

// 监听事件
theater
.on(“say:start, erase:start”, function () {
// add blinking caret
})
.on(“say:end, erase:end”, function () {
// remove blinking caret
})
.on(“*”, function () {
// do something
});
</script>[/cc]

TheaterJS.js github地址https://github.com/Zhouzi/TheaterJS

来源:打字效果的JS库TheaterJS

4 评论 “打字效果的JS库TheaterJS

    2tj 评论:
    2019年5月5日 下午7:43

    好文章!666,学习了

    吾读 评论:
    2019年5月8日 下午7:55

    哇塞,居然是沙发?留个名

    ygtcp 评论:
    2019年5月9日 上午1:05

    好文章!666,学习了

    请看小说阅读网 评论:
    2019年5月10日 下午2:28

    非常精彩的文章,引人入胜,痛快淋漓。感谢楼主分享。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注