实用资源JS和CSS实现网页文字打字机的效果

JS和CSS实现网页文字打字机的效果

不通过GIF或Flash,在网页上实现文字像打字机那样一个个打出来的效果,如下图:

文字打字机效果.gif

实现该效果,首先要引入iType.js文件:

<script src="iType.js"></script>

然后在需要插入动画文字的地方写上下面的标签:

<span id="ityped"></span>

在网页尾部加上下面这段代码:

<script>
ityped.init('#ityped', {
strings:['天青色等烟雨 而我在等你', '炊烟袅袅升起 隔江千万里', '在瓶底书汉隶仿前朝的飘逸', '就当我为遇见你伏笔'],
startDelay: 500,
loop:true
});
</script>

所显示的文字就在这段代码里定义,多句文字之间以英文逗号隔开即可。

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/120.html