功能介紹
jQuery仿鍵盤打字輸入動畫效果，支持設置字體爲紅色、設置背景色、暫停、開始、碼字、退格功能。
源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鍵盤輸入</title>
<style>
body{
background:#eee;
}
</style>
</head>
<body>
<div id="lu_word_box" style="margin: 0 auto;border: 10px solid #3385FF;border-radius: 10px;">
</div>
<div style="position:relative; width: 230px; height: 30px; margin: 0 auto; top: 15px;">
<input type="text" id="word" /> <button id="set">設置</button>
</div>
<div id="lu_word_box1" style="position:relative; margin: 0 auto;border: 10px solid #3385FF;top: 30px;border-radius: 10px;">
</div>
<div style="position:relative; width: 400px; height: 30px; margin: 0 auto; top: 30px;padding-top: 30px;">
<button id="red">設置字體爲紅色</button>
<button id="Bg">設置背景色</button>
<button id="stop">暫停</button>
<button id="start">開始</button>
<button id="write">碼字</button>
<button id="del">退格</button>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/word.js"></script>
<script type="text/javascript">
$(function(){
//例子1
$('#lu_word_box').lu_word();
$('#set').click(function(){
$('#lu_word_box').setWord($('#word').val());
});
//例子2
var obj1 = {
text:["廣州，簡稱穗，別稱羊城、花城，是廣東省省會、副省級市、國家中心城市、超大城市、國際大都市、國際商貿中心、國際綜合交通樞紐、國家綜合性門戶城市，首批沿海開放城市，是南部戰區司令部駐地 [1-2] 。 " ,
"廣州地處廣東省中南部，珠江三角洲北緣，瀕臨南海，鄰近香港、澳門，是中國通往世界的南大門，是粵港澳大灣區、泛珠江三角洲經濟區的核心城市以及一帶一路的樞紐城市。 [3-4] ",
"廣州是國家歷史文化名城，從秦朝開始，廣州一直是郡治、州治、府治的行政中心；",
"一直是華南地區的政治、軍事、經濟、文化和科教中心，是嶺南文化的發源地和興盛地。"],//文本
color:"white",//字體和光標顏色
speed:100,//打字速度
sleep:3000,//回退停頓時間
width:"400",//寬度
height:"300",//高度
background:"#000",//背景顏色
sign:true//啓動或停止
};
var box = $('#lu_word_box1');
box.lu_word(obj1);
$('#red').click(function(){
box.setColor('red');
});
$('#Bg').click(function(){
box.setColor('black');
box.setBg('#E5EECC');
});
$('#start').click(function(){
box.start();
});
$('#stop').click(function(){
box.stop();
});
$('#write').click(function(){
box.write();
});
$('#del').click(function(){
box.del();
});
});
</script>
</body>
</html>
需要導入jQuery
$.fn.extend({
obj:{},
lu_word:function(obj={}){
var id = $(this).attr('id');
this.obj[id] = { text:["Hello World!"],width:"200", height:"300",background:"#000",color:"#fff",speed:'300',sleep:'2000',sign:true,type:true,end:0};
$.extend(this.obj[id],obj);
var t = this.obj;
var that = t[id];
var word = $(this);
word.css({"width":that.width,"height":that.height,"word-wrap":"break-word","background":that.background});
word.append("<span class='lu_word_title'></span><span class='lu_word_line' style='width: 2px;background:"+that.color+";height: 20px;border: 1px solid "+that.color+";'></span>");
var title = $(this).find('.lu_word_title');
var line = $(this).find('.lu_word_line');
title.css('color',that.color);
var lineSign = true;
var i = 0;
setInterval(function(){ that = t[id]; go();},that.speed);
setInterval(cursor,1000);
function go(){
if(!that.sign){
return;
}
if(i >= that.text.length){
i=0;
}
var text = that.text[i];
var w = text.substr(0, that.end);
title.text(w);
if(that.type) {
if(that.end >= text.length){
t[id].type = false;
that.sign = false;
setTimeout(()=>{that.sign = true}, that.sleep);
}
t[id].end++;
}else{
if(that.end <= 0){
t[id].type = true;
i++
}
t[id].end--;
}
}
function cursor(){
if(lineSign){
line.hide();
lineSign = false;
}else{
line.show();
lineSign = true;
}
}
},
setColor:function(color){
var title = $(this).find('.lu_word_title');
var line = $(this).find('.lu_word_line');
title.css('color',color);
line.css('border',"1px solid "+color+"");
},
setBg:function(color){
$(this).css('background',color);
},
setSpeed:function(speed){
that.speed = speed;
},
start:function(){
var id = $(this).attr('id');
this.obj[id].sign=true;
},
stop:function(){
var id = $(this).attr('id');
this.obj[id].sign=false;
},
write:function(){
var id = $(this).attr('id');
this.obj[id].type = true;
},
del:function(){
var id = $(this).attr('id');
this.obj[id].type=false;
},
setWord:function(word){
var id = $(this).attr('id');
var that = this.obj[id];
that.text=[word];
that.end=0;
that.sign=true;
that.type=true;
}
});
效果演示
http://code_demo.moyublog.com/code/5d236e3a84739/index.html
參考文章
