笑清风博客搜集到一款比较javascript打字机效果，试了一下，效果还不错，用的时候可以自行定义样式，然后对应id就可以了。另外jquery需要自己去下载用了。笑清风博客暂时不提供文件加载功能。下面贴上代码以及效果图：
html部分：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="body">
<div class="wrapper">
<input class="search" type="text" id="search" placeholder="请输入您想了解的问题...">
<input class="submit" type="submit" value=" ">
</div>
</div>
javascript部分：
var ph = "请输入您想了解的问题...",
searchBar = $('#search'),
// placeholder loop counter
phCount = 0;
// function to return random number between
// with min/max range
function randDelay(min, max) {
return Math.floor(Math.random() * (max-min+1)+min);
}
// function to print placeholder text in a
// 'typing' effect
function printLetter(string, el) {
// split string into character seperated array
var arr = string.split(''),
input = el,
// store full placeholder
origString = string,
// get current placeholder value
curPlace = $(input).attr("placeholder"),
// append next letter to current placeholder
placeholder = curPlace + arr[phCount];
setTimeout(function(){
// print placeholder text
$(input).attr("placeholder", placeholder);
// increase loop count
phCount++;
// run loop until placeholder is fully printed
if (phCount < arr.length) {
printLetter(origString, input);
}
// use random speed to simulate
// 'human' typing
}, randDelay(50, 90));
}
// function to init animation
function placeholder() {
$(searchBar).attr("placeholder", "");
printLetter(ph, searchBar);
}
placeholder();
$('.submit').click(function(e){
phCount = 0;
e.preventDefault();
placeholder();
});
css部分：
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
html {
background: -webkit-linear-gradient(left, #00c6ff 10%, #0072ff 90%);
background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
padding-top: 50px;
}
h1 {
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
h1, h2 {
text-align: center;
color: white;
font-size: 1.8em;
line-height: 1.3em;
font-weight: 300;
}
h2 {
margin-top: 100px;
font-size: 1.3em;
font-style: italic;
font-weight: 100;
}
.body {
width: 100%;
height: 250px;
box-sizing: border-box;
}
input {
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 60%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
}
.submit {
cursor: pointer;
border: none;
background: url("") no-repeat center center, #1E1E20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 150px;
height: 80px;
}
