神奇的前端输入模拟插件 -- typed.js

在线演示1

本地下载

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

插件的github地址

Okay,

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

最基础的使用：

<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."] });

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

<span id="typed" style="white-space:pre"></span>

...

$(".typed").typed({ strings: ["Sentence with a\nline 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>

好吧~我承认上面基本上都是从github上面粘贴下来的，下面就来一点原创的：

这个插件很简单，但太简单了，稍微复杂一点的需求都无法实现，比如说，他的插件是在一个string输出完毕以后，如果输出下一段string，那么会先用backspace删除所有之前string的文字，然后再输出下一段。但是我之前就很想有一个可以删除部分片段的方法，但是我并没有找到这个方法，或许没有。

而且这个插件简单，所以很多效果还是需要通过自己写效果，他没有自己的theme~

下面这个演示，是我从http://allison.house/404扒下来的，内容比单纯插件更丰富，然后自己做了一些修改：

http://www.gbtags.com/gb/rtreplayerpreview-standalone/1169.htm

把玩儿地址： http://www.gbtags.com/gb/rtreplayerpreview/1169.htm

原文链接：http://www.gbtags.com/gb/share/5789.htm