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

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

 代码如下 复制代码
<div id="autotype">
    <p>two_step_auth_command.bui</p>
    <br>
    <p>for agent 54348</p>
    <p>中文文字测试测试</p>
</div>
<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标签完整输出,如:<p>
            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>
时间: 2024-10-13 21:39:13

jquery实现自动逐字打印效果(像黑客电影一样)的相关文章

jquery实现文本框的文本自动补全效果

 这篇文章主要介绍了jquery实现文本框的文本自动补全效果,大家参考使用吧   代码如下: /*文本自动补全 zhouxiang*/   (function ($) {     $.Completion = function (setting) {         var opts = $.extend({}, $.Completion.DefaultSetting, setting);         //宽度         var Completion_Width = null;    

jquery实现简单的自动播放幻灯片效果_jquery

本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: <div id="slideshow"> <div> <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="images/5230/5638093881_a791e4f819_m.jp

jQuery的自动左右滚动及可控制滚动效果

jquery的自动左右滚动及可控制滚动效果 思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展示区块left值实现切换. 1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加left值,向前滚动; 2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减left值,向后滚动; 3.数字点击:利用index(-)获取当前点击在数字列表中的索引值, 然后索引值为倍数为外围宽度负值.即可达到切换   ...... //***调用自动滚动 autosl

jQuery实现自动切换播放的经典滑动门效果_jquery

本文实例讲述了jQuery实现自动切换播放的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换[播放]滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/ 具体代码如下: <!

jquery插件之文字间歇自动向上滚动效果代码_jquery

本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

jQuery实现感应鼠标动画效果自动伸长的输入框实例_jquery

本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

jQuery实现文本框邮箱输入自动补全效果_jquery

  邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家!  效果图如下: 完整demo代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

jquery实现网站幻灯片切换效果焦点图

jquery代码 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-image-scale-carousel.js" type="text/javascript" charset="utf-8"

Java实现动画逐字打印

在现代,摒弃传统的会话方式,很多的图形广告或游戏采用了[ 逐字打印]的效果来展示文字,当然,这样做的目的无非是为了突 出内容或吸引眼球. 但是这种实现方式却是值得借鉴的,以下,我给出一个JAVA实 现的简单用例,需要者可以自行扩充. 代码实现: package org.test; import java.awt.Color; import java.awt.Font; import java.awt.Frame; import java.awt.Graphics; import java.awt