码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-07 13:44:49      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:css   app   for   children   function   style   text   文字   字体   

<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);
    };

}

 

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

标签:css   app   for   children   function   style   text   文字   字体   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!