10
typing.js——打字机效果
source link: https://greyli.com/typing-js-typewriter-effect/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
typing.js——打字机效果
前一段时间，无意间在某个人的个人页面看到一个很有趣的打字机效果，可以自动的打出一段文字，删掉，然后打出另一段文字。经过半天的尝试，自己写了一个出来。因为没有系统学过JavaScript（只看过一本JavaScript编程精解……），写出来的代码不够简洁和优雅，嵌套了太多if语句。欢迎到Github上提交修改。
GitHub项目地址： https://github.com/greyli/typing.js
打字机效果很适合用在个人页面和主页的头部，下面是几个示例。
首先把CSS和JS文件放到相应的目录下，然后在HTML文件里分别引入这两个文件：
<link href="typing.css" rel="stylesheet">
<script src="typing.js"></script>
在需要放置的地方插入下面这行
<span id="words"></span><span id="cursor">|</span>
cursor是文字后面闪烁的光标，你可以更换它。
最后在末尾设置你要定义的字段和相关的设置。首先你需要定义一个数组，然后写入单个或多个字段。
<script>
var strings = new Array("一段文字"); // 单个字段
</script>
<script>
var strings = new Array("文段1", "文段2"); // 多个字段
</script>
可选的设置有打字速度和删除速度，是否循环（默认为循环）等。
<script>
var strings = new Array("文段1", "文段2") ; // multi words
var typingSpeed = 100; // 打出每个字的间隔时间
var deleteSpeed = 40; // 删除每个字的间隔时间
var isLoop = true; // 是否循环，true/false
var waitTime = 800; // 打完一个字段后的等待时间
</script>
如果你在使用这个JS库，那么请让我知道，我会把你加入DEMO里。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK