您的位置：首页 > Web前端 > JQuery

jquery实现打字效果

2015-12-19 14:48 661 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航