jquery实现打字效果

来源：互联网发布：淘宝考试答题器编辑：程序博客网时间：2024/05/01 02:56

<!doctype html><html dl><head><title>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></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'><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script><script src="http://iamdanfox.github.io/typetype/jquery.typetype.min.js" type="text/javascript"></script></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="http://yandex.st/highlightjs/8.0/highlight.min.js"></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript" src="../public/js/jquery/lib/jquery.typetype.min.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>

<!doctype html><html><head><title>TypeType</title><script src="../public/js/jquery/jquery-1.8.2.min.js"></script><script src="../public/js/jquery/lib/jquery.typetype.min.js"></script><script>$(function(){$('textarea')  .typetype('Hello, world!')  .delay(1000)  .typetype('\n\nGoodbye.')  .backspace(25)  .fadeOut() // jQuery效果});</script><style></style></head><body><textarea></textarea></body></html>

0 0