【jquery实现自动切换】jquery实现自动逐字打印效果(像黑客电影一样)

更新时间:2019-09-18    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

为了在这重现黑客的神奇功力是怎么做到的,我们来解密下这逼真效果的实现方法

 代码如下
   

two_step_auth_command.bui


   

   

for agent 54348


   

中文文字测试测试



<script>
    $.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);
            // html标签完整输出,如:


            if (current == "<"){
                index = str.indexOf(">", index) + 1;
            }
            else{
            index++;
            }
            //位运算符: 根据setInterval运行奇偶次来判断是否加入下划线字符“_”,使输入效果更逼真
            if (index < str.length-1){ //打印字符倒数第2个字符开始,不加下划线字符,以防止结束符可能会多输出一下划线字符
                _this.html(str.substring(0, index) + (index & 1 ? "_" : ""));
            }else{
                _this.html(str.substring(0, index));
                clearTimeout(timer);
            };
            setTimeout(args.callee,70)
        };
        // 延迟1s开始
        setTimeout(timer,1000);
    };
    $("#autotype").autotype();
</script>

本文来源:http://www.bbyears.com/wangyezhizuo/68587.html