jQuery模拟键盘打字插件typetype代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery模拟键盘打字插件typetype代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html><html dl><head>
<title>jQuery模拟键盘打字插件typetype</title>
<style>
body {
  text-align:center;
  font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
  background:rgb(51,51,51);
  margin:0;
}
#header {
  position:absolute;
  width:100%;
  top:50%;margin-top:-210px;
  -webkit-transition:all 1s;
  transition:all 1s;
  opacity:0;
}
.reveal #header {
  margin-top:-270px;
  opacity:0.3;
}
.reveal #header:hover {
  opacity:0.9;
  -webkit-transition:all 200ms;
  transition:all 200ms;
}
#header, #header a {
  height:40px;
  color:white;
  font-size:30px;
  text-decoration:none;
  font-family:'Helvetica Neue',Helvetica,sans-serif;
}
#header a:hover {
  text-decoration:underline;
}
#header iframe {
  position:absolute;
  top:0.3em;
  margin-lefT:0.5em;
}
.ta {
position:absolute;
right:50%;
top:50%;
margin-top:-210px;
height:420px;
width:420px;
background:rgb(35,36,38);
z-index:2;
-webkit-transition:all 1s, color 400ms, outline 50ms;
transition:all 1s, color 400ms, outline 50ms;
overflow:hidden;
}
.textarea {
  display:block;
  background:none;
  height:400px;
  width:400px;
  padding:10px;
  color:rgb(236,236,236);
  font-size:130%;
/*  border:1px solid rgb(171,202,243);*/
  border:0;
}
.textarea.dim {
color:rgba(236,236,236,0.3);
}
#rhs {
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-210px;
  height:420px;
  width:420px;
  background:rgba(230,230,230,1);
  white-space:pre;
  -webkit-transition:all 1s;
  -transition:all 1s;
  font-size:80%;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align:left;
}
#rhs #code {
height:400px;
width:400px;
padding:10px;
  background:none !important;
}
.ta {
  margin-right:-210px;
}
#rhs {
  margin-left:-210px;
}
.reveal .ta, .reveal #rhs {
  margin-right:0px;
  margin-left:0px;
}
#secondhalf {
  display:none;
}
#usage {
  position:absolute;
  display:block;
  border:0;
  background:rgb(209,141,249);
  background:#bdb;
  color:#030;
  z-index:3;
  display:block;
  bottom:-70px;
  left:15px;
  width:380px;
  height:3em;
  padding:5px;
  overflow:scroll;
  white-space:pre;
  opacity:0;
  -webkit-transition:bottom 1s, opacity 200ms;
  transition:bottom 1s, opacity 200ms;
  font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
}
#usage.show {
  opacity:0.4;
  bottom:15px;
}
#usage:hover {
  opacity:1;
}
</style>



<link rel="stylesheet" href="css/default.min.css">

</head>
<body>

<div id="header">
  typetype by  @iamdanfox 
</div>

<div class="ta">
<textarea spellcheck="false" class="textarea"></textarea>
<textarea id="usage" title="Just 578 bytes gzipped!" readonly spellcheck='off' wrap='off'>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript">&lt;/script&gt;
&lt;script src="http://iamdanfox.github.io/typetype/jquery.typetype.min.js" type="text/javascript"&gt;&lt;/script&gt;</textarea>

</div>

<div id="rhs">
<div id="code">$('textarea').focus()
  .typetype("Sometimes, it's really nice to simulate a human typing...", {
    callback: function() {
      $('body').addClass('reveal')
    }
  }).delay(1500)
  .typetype("\n\nThat's what this `typetype` jQuery plugin is for.")
<span id="secondhalf">  .fadeTo(400,0.3).delay(1000).queue(function(){$('#secondhalf').fadeIn(1000);$('textarea').dequeue()}).delay(4000).fadeTo(400,1.0).delay(1000)
  .typetype("\n\nYou can make it fast... ",{
    keypress:flashTextarea,
    t:60,
    e:0
  })
  .typetype("or slow and error-prone.", {
    t:200,
    e:0.2, // the default error rate is 0.04
  })
  .backspace(48)
  .typetype("Try it out!")</span>
</div>

</div>


<script src="js/highlight.min.js"></script>

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.typetype.js"></script>
<script type="text/javascript">
function flashTextarea(){
  console.log('fl')
  $('.ta').css({'outline':'1px solid rgba(255,255,0,0.7)'})
  setTimeout(function(){
    $('.ta').css({'outline':'1px solid rgba(255,255,0,0)'})
  },50)
}

$(function(){

  hljs.configure({languages:['js']})
  hljs.highlightBlock($('#code')[0])

  $('#usage').click(function(){
    this.focus()
    this.select()
  })


  $('.textarea').focus()
    .typetype("Sometimes, it's really nice to simulate a human typing...", {
      callback: function() {
        $('body').addClass('reveal')
      }
    }).delay(1500)
    .typetype("\n\nThat's what this `typetype` jQuery plugin is for.")
    .fadeTo(400,0.3).delay(1000).queue(function(){$('#secondhalf').fadeIn(1000);$('textarea').dequeue()}).delay(4000).fadeTo(400,1.0).delay(1000)
    .typetype("\n\nYou can make it fast... ",{
      keypress:flashTextarea,
      t:60,
      e:0
    })
    .typetype("or slow and error-prone.", {
      t:200,
      e:0.2, // the default error rate is 0.04
      callback: function(){
        $("#usage").addClass('show')
      }
    })
    .backspace(48)
    .typetype("Try it out!")

})
</script>
</body>
</html>

JS代码(jquery.typetype.min.js):

jQuery.fn.extend({
	backspace:function(e,t){
	var n;
	return n=jQuery.extend({
	callback:function(){
}
,keypress:function(){
}
,t:100,e:.04}
,t),this.each(function(){
	var t;
	return t=this,jQuery(t).queue(function(){
	var r,u;
	return r=t.tagName==="input".toUpperCase()||t.tagName==="textarea".toUpperCase()?"value":"innerHTML",(u=function(e){
	e?(t[r]=t[r].slice(0,-1),n.keypress.call(t),setTimeout(function(){
	return u(e-1)}
,Math.random()*n.t)):(n.callback.call(t),jQuery(t).dequeue())}
)(e)}
)}
)}
,typetype:function(e,t){
	var n,r;
	return r=jQuery.extend({
	callback:function(){
}
,keypress:function(){
}
,t:100,e:.04}
,t),n=function(t){
	return Math.random()*r.t*(e[t-1]===e[t]?1.6:"."===e[t-1]?12:"!"===e[t-1]?12:"?"===e[t-1]?12:"\n"===e[t-1]?12:","===e[t-1]?8:";
	"===e[t-1]?8:":"===e[t-1]?8:" "===e[t-1]?3:2)}
,this.each(function(){
	var t;
	return t=this,jQuery(t).queue(function(){
	var u,a,c,i;
	return a=t.tagName==="input".toUpperCase()||t.tagName==="textarea".toUpperCase()?"value":"innerHTML",u=function(e,n){
	e?(t[a]+=e[0],r.keypress.call(t),setTimeout(function(){
	return u(e.slice(1),n)}
,r.t)):n()}
,c=function(e,n){
	e?(t[a]=t[a].slice(0,-1),r.keypress.call(t),setTimeout(function(){
	return c(e-1,n)}
,r.t)):n()}
,(i=function(o){
	var s,l;
	e.length>=o?(s=function(){
	return setTimeout(function(){
	return i(o)}
,n(o))}
,l=Math.random()/r.e,.3>l&&e[o-1]!==e[o]&&e.length>o+4?u(e.slice(o,o+4),function(){
	return c(4,s)}
):.7>l&&o>1&&/[A-Z]/.test(e[o-2]&&e.length>o+4)?u(e[o-1].toUpperCase()+e.slice(o,o+4),function(){
	return c(5,s)}
):.5>l&&e[o-1]!==e[o]&&e.length>o?u(e[o],function(){
	return c(1,s)}
):1>l&&e[o-1]!==e[o]&&e.length>o?u(e[o]+e[o-1],function(){
	return c(2,s)}
):.5>l&&/[A-Z]/.test(e[o])?u(e[o].toLowerCase(),function(){
	return c(1,s)}
):(t[a]+=e[o-1],r.keypress.call(t),setTimeout(function(){
	return i(o+1)}
,n(o)))):(r.callback.call(t),jQuery(t).dequeue())}
)(1)}
)}
)}
}
);

CSS代码(default.min.css):

.hljs{display:block;padding:.5em;background:#f0f0f0}
.hljs,.hljs-subst,.hljs-tag .hljs-title,.lisp .hljs-title,.clojure .hljs-built_in,.nginx .hljs-title{color:black}
.hljs-string,.hljs-title,.hljs-constant,.hljs-parent,.hljs-tag .hljs-value,.hljs-rules .hljs-value,.hljs-rules .hljs-value .hljs-number,.hljs-preprocessor,.hljs-pragma,.haml .hljs-symbol,.ruby .hljs-symbol,.ruby .hljs-symbol .hljs-string,.hljs-aggregate,.hljs-template_tag,.django .hljs-variable,.smalltalk .hljs-class,.hljs-addition,.hljs-flow,.hljs-stream,.bash .hljs-variable,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-command,.tex .hljs-special,.erlang_repl .hljs-function_or_atom,.asciidoc .hljs-header,.markdown .hljs-header,.coffeescript .hljs-attribute{color:#800}
.smartquote,.hljs-comment,.hljs-annotation,.hljs-template_comment,.diff .hljs-header,.hljs-chunk,.asciidoc .hljs-blockquote,.markdown .hljs-blockquote{color:#888}
.hljs-number,.hljs-date,.hljs-regexp,.hljs-literal,.hljs-hexcolor,.smalltalk .hljs-symbol,.smalltalk .hljs-char,.go .hljs-constant,.hljs-change,.lasso .hljs-variable,.makefile .hljs-variable,.asciidoc .hljs-bullet,.markdown .hljs-bullet,.asciidoc .hljs-link_url,.markdown .hljs-link_url{color:#080}
.hljs-label,.hljs-javadoc,.ruby .hljs-string,.hljs-decorator,.hljs-filter .hljs-argument,.hljs-localvars,.hljs-array,.hljs-attr_selector,.hljs-important,.hljs-pseudo,.hljs-pi,.haml .hljs-bullet,.hljs-doctype,.hljs-deletion,.hljs-envvar,.hljs-shebang,.apache .hljs-sqbracket,.nginx .hljs-built_in,.tex .hljs-formula,.erlang_repl .hljs-reserved,.hljs-prompt,.asciidoc .hljs-link_label,.markdown .hljs-link_label,.vhdl .hljs-attribute,.clojure .hljs-attribute,.asciidoc .hljs-attribute,.lasso .hljs-attribute,.coffeescript .hljs-property,.hljs-phony{color:#88F}
.hljs-keyword,.hljs-id,.hljs-title,.hljs-built_in,.hljs-aggregate,.css .hljs-tag,.hljs-javadoctag,.hljs-phpdoc,.hljs-yardoctag,.smalltalk .hljs-class,.hljs-winutils,.bash .hljs-variable,.apache .hljs-tag,.go .hljs-typename,.tex .hljs-command,.asciidoc .hljs-strong,.markdown .hljs-strong,.hljs-request,.hljs-status{font-weight:bold}
.asciidoc .hljs-emphasis,.markdown .hljs-emphasis{font-style:italic}
.nginx .hljs-built_in{font-weight:normal}
.coffeescript .javascript,.javascript .xml,.lasso .markup,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:.5}

附件:下载该文件资源,减少时间成本(增值服务)