Typed.js是我发现的一个很神奇的小工具。整个js插件虽然仅仅只有400行，但是这个插件的效果让人眼睛一亮。而且这个插件似乎支持bower，所以个个bower使用者也可以尽情使用。

我们一步一步来使用这个插件：

使用方法

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

如果你想让你的输入光标闪起来：

.typed-cursor{

    opacity: 1;

    -webkit-animation: blink 0.7s infinite;

    -moz-animation: blink 0.7s infinite;

    animation: blink 0.7s infinite;

}

@keyframes blink{

    0% { opacity:1; }

    50% { opacity:0; }

    100% { opacity:1; }

}

@-webkit-keyframes blink{

    0% { opacity:1; }

    50% { opacity:0; }

    100% { opacity:1; }

}

@-moz-keyframes blink{

    0% { opacity:1; }

    50% { opacity:0; }

    100% { opacity:1; }

}

如果你想使用html作为文本，那么：

$(".typed").typed({ strings: ["Sentence with <br>line break."] });

如果你想在文本中停顿：

<script>

    $(function(){

        $(".element").typed({

            // Waits 1000ms after typing "First"

            strings: ["First ^1000 sentence.", "Second sentence."]

        });

    });

</script>

更多参数：

<script>

    $(function(){

        $(".element").typed({

            strings: ["First sentence.", "Second sentence."],

            // typing speed

            typeSpeed: 0,

            // time before typing starts

            startDelay: 0,

            // backspacing speed

            backSpeed: 0,

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