打字效果的JS库TheaterJS
在之前的文章里也介绍了一个打字效果的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
2019年5月5日 下午7:43
好文章!666,学习了
2019年5月8日 下午7:55
哇塞,居然是沙发?留个名
2019年5月9日 上午1:05
好文章!666,学习了
2019年5月10日 下午2:28
非常精彩的文章,引人入胜,痛快淋漓。感谢楼主分享。