最近在网上看到一个字符逐个出现的打字效果，觉得挺有趣的，想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符，于是就基于jQuery写了一个简单版的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AutoType</title>
</head>
<body>
<div id="autotype"></div>
<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $.fn.autotype = function (str, speed) {
        var self = this,
                defaultStr = '<p>我希望有个如你一般的人.</p><br>'
                          +'<p>如山间清爽的风.</p><br>'
                          +'<p>如古城温暖的光.</p><br>'
                          +'<p>从清晨到夜晚.</p><br>'
                          +'<p>由山野到书房.</p><br>'
                          +'<p>只要最后是你，就好.</p><br>',//将要添加的元素的默认内容
                defaultSpeed = 100,
                str = str || defaultStr,
                speed = speed || defaultSpeed,
                index = 0,
                timer = setInterval(function () {
                    var current = str.substr(index, 1);
                    if (current == '<') {
                        index = str.indexOf('>', index) + 1;
                    } else {
                        index++;
                    }
                    self.html(str.substring(0, index) + ( (index & 1) && (index != str.length) ? '_' : ''));
                    if (index >= str.length) {
                        clearInterval(timer);
                    }
                }, speed);
    };
    $("#autotype").autotype();
</script>
</body>
</html>

本人才疏学浅，总觉得自己写的方法比较简陋，于是搜索了一波资料，发现有个不错的jQuery插件Typed.js。

Type.js的基础使用

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
    $(function(){
        $(".element").typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
    });
</script>
...

<span class="element"></span>

插件为用户定制了许多默认设置与效果

<script>
    $(function(){
        $(".element").typed({
            strings: ["First sentence.", "Second sentence."],
            // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
            stringsElement: null,
            // typing speed
            typeSpeed: 0,
            // time before typing starts
            startDelay: 0,
            // backspacing speed
            backSpeed: 0,
            // shuffle the strings
              shuffle: false,
            // time before backspacing
            backDelay: 500,
            // loop
            loop: false,
            // false = infinite
            loopCount: false,
            // show cursor
            showCursor: true,
            // character for cursor
            cursorChar: "|",
            // attribute to type (null == text)
            attr: null,
            // either html or text
            contentType: 'html',
            // call when done callback function
            callback: function() {},
            // starting callback function before each string
            preStringTyped: function() {},
            //callback for every typed string
            onStringTyped: function() {},
            // callback for reset
            resetCallback: function() {}
        });
    });
</script>

具体用法可以看看GitHub地址，带注释的源码400多行，不算复杂。

javascript实现键盘自动打字效果的更多相关文章

  1. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  2. Javascript实现打字效果

    伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...

  3. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  4. JavaScript实现动态打字效果

    废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  6. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  7. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  8. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  9. JavaScript的类型自动转换样例集合处

    1.前言 如果Javascript期望使用一个字符串,它会把给定的值转换成字符串:如果Javascript期望使用一个数字,它会把给定的值转化成数字. 2.样例 2.1.字符串拼接时有数字 windo ...

随机推荐

  1. 大型网站的灵魂——性能

    前言     在前一篇随笔<大型网站系统架构的演化>中,介绍了大型网站的演化过程,期间穿插了一些技术和手段,我们可以从中看出一个大型网站的轮廓,但想要掌握设计开发维护大型网站的技术,需要我 ...

  2. 小丁带你走进git的世界四-重写历史记录

    一.git对象文件创建 开篇先补充一个知识点,就是比如我建立一个文件之后,使用git add就会生成一个git对象,但是git对象生成后可以在.git/objects里面对应,首先我们来初始化一个仓库 ...

  3. Entity Framework 6 Recipes 2nd Edition（13-4）译 -> 有效地创建一个搜索查询

    问题 你想用LINQ写一个搜索查询,能被转换成更有效率的SQL.另外,你想用EF的CodeFirst方式实现. 解决方案 假设你有如下Figure 13-6所示的模型 Figure 13-6. A s ...

  4. Android开发学习之路-Git的极简教程？

    Git是一个代码版本管理工具,也就是允许我们的一个项目拥有多个版本,这样我们可以随心所欲的修改我们的代码,如果出现问题,可以回退到某一个提交点.如果你还在用一堆堆注释来更新你的代码,那么可以尝试一下G ...

  5. Jquery Uploadify3.21.与2.1版本 使用中存在的问题--记录三

    Jquery Uploadify是个上传插件. 2.1版本与3.2.1版本有很大区别,方法名跟参数变动较大 1.uploader:该属性是用来存放swf的路径,这个swf就是一个Flash的一个图标, ...

  6. KindEditor 给KindEditor赋值

    在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...

  7. ASP.NET MVC RouteExistingFiles

    遇到这样一个问题:项目是 MVC,但也包含 WebForm 的页面,RouteConfig 中设置了这样一个路由: routes.MapRoute( name: "SubjectIndex& ...

  8. web api添加拦截器

    实现思路 1.标识控制器有拦截特性: 2.控制器拦截处理: 代码实现 1.标识控制器有拦截特性,代码: [MyFilter] public string PostFindUser([FromBody] ...

  9. C# 给PDF文件添加水印

      水印种类及功能介绍 PDF水印分为两种:文本水印和图片水印.文本水印一般被用在商业领域,提醒读者该文档是受版权保护的,其他人不能抄袭或者免费使用.除了这个特征,水印还可以用来标记这个文档 的一些基 ...

  10. Windows下构建ASP.NET Core+Code First+Docker

    背景介绍 本文将会示范如何在Windows系统下基于ASP.NET Core构建跨平台服务,并通过Docker容器运行发布. 首先说一下为什么选择这一套组合: 我本人和我们Code4Thought团队 ...