首页 > 其他 > 详细

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

时间:2017-08-07 12:47:22      阅读:222      评论:0      收藏:0      [点我收藏+]
<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);
    };

}

 

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

原文:http://www.cnblogs.com/phpfensi/p/7298480.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!