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