jQuery打字机插件typewriting js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery打字机插件typewriting js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery打字机插件typewriting</title>
<script src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/typewriting.min.js"></script>
<style type="text/css">
body {
	width: 100%;
	margin: 0px;
	font-family: 'Arial';
	background-color: #020202;
}

.terminal {
	width: 60%;
	font-size: 26px;
	color: #00fd55;
	letter-spacing: 2px;
	margin: 150px auto;
}

.terminal::before {
	content: ">";
	margin-right: 10px;
}
</style>
</head>
<body>
<div class="terminal"></div>
<script>
$(document).ready(function() {
	setTimeout(function() {
		$('.terminal').typewriting("内容 - #", {
			"typing_interval": 200,
			"blink_interval": "1s",
			"cursor_color": "#00fd55"
		}, function() {
			console.log("END");
		});
		setTimeout(function() {
			$('.terminal').rewrite("内容 - #", function() {
				console.log("END, 2.");
			});
		}, 3300);
	}, 1000);
});
</script>
</body>
</html>

JS代码(typewriting.min.js):

"use strict";
	!function(t){
	function i(t){
	if(o<e.inputString.length){
	var r=n();
	"<"==r.slice(-1)?a=!0:">"==r.slice(-1)&&(a=!1),t.html(r),a?i(t):setTimeout(function(){
	i(t)}
,e.typing_interval)}
else e.task="ready",o=0,e.tw_callback.call(this)}
function n(){
	return e.inputString.slice(0,++o)}
function r(){
	e.tw_callback=function(){
}
}
var e,o=0,a=!1;
	t.fn.typewriting=function(n,o,a){
	var s=this.width();
	this.text("I");
	var l=this.height(),c=this.width()-s;
	if(this.text(""),e=t.extend({
	typing_interval:150,blink_interval:"0.7s",cursor_color:"black",inputString:"",tw_callback:function(){
}
,task:"unready"}
,o),!n)throw new Error("Missing argument:String");
	if("string"!=typeof n)throw new Error(n+" is not a string");
	e.inputString=n,a?"function"==typeof a?e.tw_callback=a:(console.error(a+" is not a function"),r()):r(),t("head").append("<style type='text/css'>@-webkit-keyframes blink{
	0%,100%{
	opacity:1}
50%{
	opacity:0}
}
@-moz-keyframes blink{
	0%,100%{
	opacity:1}
50%{
	opacity:0}
}
@keyframes blink{
	0%,100%{
	opacity:1}
50%{
	opacity:0}
}
.typingCursor::after{
	content:'';
	width:"+c+"px;
	height:"+l+"px;
	margin-left:5px;
	display:inline-block;
	vertical-align:bottom;
	background-color:"+e.cursor_color+";
	-webkit-animation:blink "+e.blink_interval+" infinite;
	-moz-animation:blink "+e.blink_interval+" infinite;
	animation:blink "+e.blink_interval+" infinite}
</style>"),e.task="typing",i(this.addClass("typingCursor"))}
,t.fn.rewrite=function(t,n){
	if("typing"==e.task)console.warn("Last task is not finished yet."),setTimeout(function(){
	this.rewrite(t,n)}
.bind(this),e.typing_interval);
	else{
	if(!t)throw new Error("Missing argument:String");
	if("string"!=typeof t)throw new Error(t+" is not a string");
	if(e.inputString=t,n){
	if("function"!=typeof n)console.error(n+" is not a function");
	e.tw_callback=n}
else r();
	e.task="typing",i(this)}
}
}
(jQuery);

CSS代码(main.css):

@-webkit-keyframes blink{0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes blink{0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
@keyframes blink{0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
.typingCursor::after{content:"";width:10px;height:37px;margin-left:5px;display:inline-block;vertical-align:bottom;background-color:black;-webkit-animation:blink .7s infinite;-moz-animation:blink .7s infinite;animation:blink .7s infinite;}

附件:下载该文件资源,减少时间成本(增值服务)