jQuery实现逐字输入效果

最新推荐文章于 2025-08-12 14:37:12 发布

weixin_33972649

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 游戏 ViewUI

原文链接：http://www.cnblogs.com/lilixing/p/4613617.html

本文介绍了一个简单的逐字输入效果的实现方式，并分享了具体的JavaScript代码。通过使用jQuery插件，实现了文字逐个显示的效果，增加了网站或应用的趣味性和交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做了个测试小游戏（姑且叫游戏吧）为了增加神秘性，就想给她加个逐字输入效果；刚好在网上找到一个挺好用的，于是就发扬拿来主义；按照自己的喜好做了一丢丢的修改（勉强算是吧\(￣︶￣)> ）。

代码：

$.fn.autotype = function() {
    var _this=$(this);
    var str=_this.html();
    // 正则替换代码行之间添加的多个空格，不去除换行输出会有明显的停顿：实际是在输出多个空格
    str=str.replace(/(\s){2,}/g,"$1");
    var index = 0;
    $(this).html('');
    var timer = function() {
        var args=arguments;
        var current = str.slice(index, index+1);
        if (current == '<'){
            index = str.indexOf('>', index) + 1;
        }
        else{
        　　index++;
        }
        //位运算符: 根据setInterval运行奇偶次来判断是否加入下划线字符“|”，使输入效果更逼真
        if (index < str.length-1){
            //打印字符倒数第2个字符开始，不加“|”，以防止结束符可能会多输出“|”字符
            _this.html(str.substring(0, index) + (index & 1 ? '<span class="loop">|</span>' : ''));
        }else{
            _this.html(str.substring(0, index));
            return false;
        };
        // 延迟开始时间
        setTimeout(args.callee,150)
    };
    setTimeout(timer,1000);
};