使用jQuery插件typetype实现打字机效果

最终效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{margin: 50px auto;display: block;width: 300px;}
        textarea{margin: 0 auto;display: block;}
    </style>
</head>
<body>
    
    <input type="text">
    <textarea name="" id="" cols="100" rows="10"></textarea>    

    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script src="jquery.typetype.min.js"></script>
    <script>
        $('input').typetype('你准备说啥呢?');
        $('textarea').typetype('噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!',{
            t:50,
            keypress:function(){
                // console.log(1);
            },
            callback:function(){
                console.log('completed!');
            }
        });
    </script>
</body>
</html>

插件地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 插件的介绍 Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA Jav...
    Jannonx阅读 2,341评论 0 13
  • 第1章 jQuery实现Ajax应用 1-1 使用load()方法异步请求数据 使用load()方法通过Ajax请...
    mo默22阅读 1,742评论 1 9
  • 引言 先简单介绍一下Android插件化。很早之前已经有公司在研究这项技术,淘宝做得比较早,但淘宝的这项技术一直是...
    流水潺湲阅读 11,829评论 8 149
  • 感恩今天一早就有红包。 感恩梦带了我一天。 感恩报名成功 感恩祖先恩德 感恩爷爷奶奶爸爸养育之恩 感恩爸妈给我生命...
    星光2017阅读 151评论 0 4
  • (一) 七律 二O一七年三月二十八日 三月春风吹绿天, 红锦织出七色边。 花开万朵...
    经络世家阅读 410评论 0 29