jQuery模擬鍵盤打字逐字逐句顯示文本
編輯：網頁特效代碼
效果查看：http://hovertree.com/texiao/jquery/70/
jQuery模擬鍵盤自動打出逐字逐句的顯示特效，逐字逐句顯示文字。
本特效由何問起修改後，還可以對文字進行隨機演示輸出，效果請看：
http://hovertree.com/texiao/jquery/70/color.htm
手機掃描二維碼查看效果：
效果圖如下：
HTML代碼如下：<!doctype html>
<html lang="zh">
<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.0">
<title>jQuery鍵盤打出逐字逐句顯示特效 - 何問起</title><base target="_blank" />
<style>
body {
background-color: #F9F6EF;
color: #494949;
}
.hovertree-content {
width: 820px;
max-width:900px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 20px;
border: 1px solid #D0D0D0;
background-color: #EFEFEF;
margin-top: 20px;
font-weight: bold;
line-height: 24px;
}
.hovertreeinfo{
text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';
}
.hovertreeinfo a{color:blue;}
</style>
<!--[if IE]>
<script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="hovertreeinfo"><h2>jQuery模擬鍵盤打字逐字逐句顯示文本</h2></div>
<div class="hovertree-content bgcolor-3">
<p class="word1"></p>
<p class="word2"></p>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hovertree.com/texiao/jquery/70/js/l-by-l.min.js"></script>
<script>
jQuery(document).ready(function($){
$(".word1").lbyl({
content: "受到網店的影響，服裝店的生意逐漸有所下降，老板找何問起去談，大概是准備跟上網購潮流，讓何問起准備一下， 要在網上開網店，要為服裝店建立網站。 何問起也沒說自己經驗不足，只說會積極准備。於是抓緊時間查找資料，學習練習。畢竟還是有功底的，過不多久就在本地搭建了一個網站，實現了一些企業網站的基本功能，信息產品發布、留言版等。也了解了在電商網開網店的方方面面。",
speed: 100,
type: 'show',
finished: function(){
$('.word2').lbyl({
content: "何問起准備好後，跟老板報告分析了具體情況，老板說人手不足，就從易到難逐步推行把，有什麼需要盡管提。何問起又有得忙活了，但也是樂此不疲。雖然學的是紡織，而不是計算機或者軟件工程等相關專業，但自從接觸編程以後，興趣就一直有增無減，也熟悉了不少網站架設，Web前端，後端程序，數據庫等等的知識，開了網站 hovertree.com ，有向全棧工程師發展的趨勢。接受了老板的這個任務後更是開心，整天精力充沛，戰斗力十足。",
speed: 150,
type: 'fade',
fadeSpeed: 500
})
} // Finished Callback
});
});
</script>
<div class="hovertreeinfo">
<p>適用浏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/r3o7i9xq.htm">原文</a></p>
</div>
</body>
</html>
jQuery模擬鍵盤自動打出逐字逐句的顯示特效，逐字逐句顯示文字。
本特效由何問起修改後，還可以對文字進行隨機演示輸出，效果請看：
http://hovertree.com/texiao/jquery/70/color.htm
手機掃描二維碼查看效果：
效果圖如下：
HTML代碼如下：<!doctype html>
<html lang="zh">
<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.0">
<title>jQuery鍵盤打出逐字逐句顯示特效 - 何問起</title><base target="_blank" />
<style>
body {
background-color: #F9F6EF;
color: #494949;
}
.hovertree-content {
width: 820px;
max-width:900px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 20px;
border: 1px solid #D0D0D0;
background-color: #EFEFEF;
margin-top: 20px;
font-weight: bold;
line-height: 24px;
}
.hovertreeinfo{
text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';
}
.hovertreeinfo a{color:blue;}
</style>
<!--[if IE]>
<script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="hovertreeinfo"><h2>jQuery模擬鍵盤打字逐字逐句顯示文本</h2></div>
<div class="hovertree-content bgcolor-3">
<p class="word1"></p>
<p class="word2"></p>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hovertree.com/texiao/jquery/70/js/l-by-l.min.js"></script>
<script>
jQuery(document).ready(function($){
$(".word1").lbyl({
content: "受到網店的影響，服裝店的生意逐漸有所下降，老板找何問起去談，大概是准備跟上網購潮流，讓何問起准備一下， 要在網上開網店，要為服裝店建立網站。 何問起也沒說自己經驗不足，只說會積極准備。於是抓緊時間查找資料，學習練習。畢竟還是有功底的，過不多久就在本地搭建了一個網站，實現了一些企業網站的基本功能，信息產品發布、留言版等。也了解了在電商網開網店的方方面面。",
speed: 100,
type: 'show',
finished: function(){
$('.word2').lbyl({
content: "何問起准備好後，跟老板報告分析了具體情況，老板說人手不足，就從易到難逐步推行把，有什麼需要盡管提。何問起又有得忙活了，但也是樂此不疲。雖然學的是紡織，而不是計算機或者軟件工程等相關專業，但自從接觸編程以後，興趣就一直有增無減，也熟悉了不少網站架設，Web前端，後端程序，數據庫等等的知識，開了網站 hovertree.com ，有向全棧工程師發展的趨勢。接受了老板的這個任務後更是開心，整天精力充沛，戰斗力十足。",
speed: 150,
type: 'fade',
fadeSpeed: 500
})
} // Finished Callback
});
});
</script>
<div class="hovertreeinfo">
<p>適用浏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/r3o7i9xq.htm">原文</a></p>
</div>
</body>
</html>
小編推薦
熱門推薦