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

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

}
复制代码

 

posted @ 2017-08-07 12:11  壁虎漫步.  阅读(992)  评论(0)    收藏  举报
编辑推荐:
· 35+程序员的转型之路:经济寒冬中的希望与策略
· JavaScript中如何遍历对象?
· 领域模型应用
· 记一次 ADL 导致的 C++ 代码编译错误
· MySQL查询执行顺序:一张图看懂SQL是如何工作的
阅读排行:
· 35+程序员的转型之路:经济寒冬中的希望与策略
· 全球首位 AI 程序员 Devin 诞生了,对于程序员的影响到底多大?
· 使用 OpenAuth.Net 快速搭建 .NET 企业级权限工作流系统
· 做这么个免费在线拼图工具,如何赚钱呢
· 我在厂里搞wine的日子
点击右上角即可分享
微信分享提示