當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript——仿键盘打字输入动画效果DEMO
生活随笔
收集整理的這篇文章主要介紹了
JavaScript——仿键盘打字输入动画效果DEMO
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
功能介紹
?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());});//例子2var 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
參考文章
https://www.moyublog.com/codes/38.html
總結
以上是生活随笔為你收集整理的JavaScript——仿键盘打字输入动画效果DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot——基于sprin
- 下一篇： Git——[error: RPC fai