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相关推荐

android金币动效_Android 仿余额宝数字跳动动画效果完整代码
一:想都不用想的,有图有真相,看着爽了,在看下面源码二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author ...
android 文字跳动动画,Android 仿余额宝数字跳动动画效果完整代码
Android 仿余额宝数字跳动动画效果完整代码发布时间:2020-08-24 06:55:30 来源:脚本之家阅读:120 作者:曾淘一:想都不用想的,有图有真相,看着爽了,在看下面源码二: ...
javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...
vue之动画( 仿jquery的slideToggle动画效果 )
Vue提供了transition组件,写法: <transition name="box"></transition> 在进入/离开的过渡中,会有 6 个 ...
JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码 <!DOCTYPE html> <html lang=&quo ...
android仿微信红包动画,Android仿打开微信红包动画效果实现代码
首先看下效果: 实现原理: 准备3张不同角度的图片,通过AnimationDrawable帧动画进行播放即可代码实现: 1.编写动画xml文件: 根标签为animation-list,其中onesh ...
Android 仿支付宝蚂蚁森林动画效果
Android 动画可以归纳为以下几种: 视图动画(View 动画) 帧动画(Frame 动画.Drawable 动画) 属性动画触摸反馈动画(Ripple Effect) 揭露动画(Reveal ...
短视频平台源码，iOS 仿微信语音输入动画
短视频平台源码,iOS 仿微信语音输入动画实现的相关代码 // // PBSpeechRecognizer.h // ParkBest // // Created by summerxx27 on 2 ...
php蚂蚁森林的效果,iOS仿支付宝蚂蚁森林动画效果
最近要用到类似支付宝蚂蚁森林的动画效果,所以就简单写了一个比较简单的一个demo,效果图如下: 效果图1 需求: 在这个view上面随机出现n个黄钻(button),黄钻按钮还得上下抖动,箭头1指向的 ...

JavaScript——仿键盘打字输入动画效果DEMO

功能介绍

源代码

效果演示

参考文章

JavaScript——仿键盘打字输入动画效果DEMO相关推荐

最新文章

热门文章