您的位置:首页 > Web前端 > CSS

文字打字机效果,可换字体样式

2017-08-07 12:11 495 查看
<div id="text">你好,欢迎光临,今天是个好日子!</div>
<script>
$(function() {
daziji("#text", 150); //调用打字机函数
})
</script>


js

function daziji(dazijiDiv, dazijiTime) {
var text1 = $(dazijiDiv).text(),
text2 = text1,
lentext = text2.length,
textArray = text2.split("");
$(dazijiDiv).empty();
for (i = 0; i < text2.length; i++) {
$(dazijiDiv).append('<span style="display:none">' + textArray[i] + '</span>');
}
dazijiShow(dazijiDiv, lentext, dazijiTime);
}
var dazijiN = 0;

function dazijiShow(d, e, f) {
$(d).children("span").eq(dazijiN).show().css({
color: '#' + Math.floor(Math.random() * 16777215).toString(16)
});
if (dazijiN < e) {
dazijiN++;
setTimeout("dazijiShow('" + d + "'," + e + "," + f + ")", f)
} else {
dazijiN = 0;
setTimeout("dazijiShow('" + d + "'," + e + "," + f + ")", f);
};

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: