模拟终端打印效果特效
<!DOCTYPE HTML>
<html>
<head>
<title>模拟终端打印效果特效</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #000;
font-size: 16px;
overflow: auto;
width: 100%;
height: 100%;
}
#mainDiv {
width: 80%;
height: 600px;
border: 1px solid red;
margin: 0 auto;
}
#code {
float: left;
width: 440px;
height: 400px;
color: blue;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
font-size: 16px
}
#code .string {
color: green;
}
#code .keyword {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="content">
<div id="code">
<br /> 我的QQ: <span class="keyword">1010305129</span>
<br />
<span class="comments">/*************帝都雾霾有感*************/</span>
<br />
<span class="comments">* 诗歌一：雾霾</span>
<br />
<span class="comments">* 山外青山楼外楼， </span>
<br />
<span class="comments">* 旧宫雾霾几时休。 </span>
<br />
<span class="comments">* 毒风熏得游人醉，</span>
<br />
<span class="comments">* 直把帝都作非洲。</span>
<br />
<span class="comments">/*************帝都雾霾有感*************/</span>
<br />
<span class="keyword">欢迎切磋O(∩_∩)O哈哈~</span>
<br />
</div>
</div>
</div>
<script type="text/javascript">
(function(a) {
a.fn.typewriter = function() {
this.each(function() {
var d = a(this),
c = d.html(),
b = 0;
d.html("");
var e = setInterval(function() {
var f = c.substr(b, 1);
if (f == "<") {
b = c.indexOf(">", b) + 1
} else {
b++
}
d.html(c.substring(0, b) + (b & 1 ? "_" : ""));
if (b >= c.length) {
clearInterval(e)
}
}, 100)
});
return this
}
})(jQuery);
$("#code").typewriter();
</script>
</body>
</html>
