美文网首页前端知识
使用jQuery插件typetype实现打字机效果

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

作者: Tiny_z | 来源:发表于2016-08-30 09:53 被阅读34次
最终效果

代码

<!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>

插件地址

相关文章

网友评论

    本文标题:使用jQuery插件typetype实现打字机效果

    本文链接:https://www.haomeiwen.com/subject/nzyfettx.html