jquery实现打字效果

最新推荐文章于 2025-06-19 14:35:59 发布

转载最新推荐文章于 2025-06-19 14:35:59 发布 · 1.2k 阅读

<!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>