基于jQuery实现的打字机效果
话不多说，请看实例代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<metaname="renderer"content="webkit">
<metahttp-equiv="X-UA-Compatible"content="IE=Edge">
<metaname="keyword"content="">
<metaname="description"content="">
</head>
<body>
<divclass="autotype"id="autotype">
<p>一场雨把我困在这里</p>
<br/>
<p>你温柔的表情</p>
<p>会让我伤心</p>
<br/>
<p>六月的雨，只是无情的你~</p>
</div>
<scriptsrc="http://file2.ci123.com/ast/js/jquery_172.js"></script>
<script>
$.fn.autotype=function(){
var$text=$(this);
console.log('this',this);
varstr=$text.html();//返回被选元素的内容
varindex=0;
varx=$text.html('');
//$text.html()和$(this).html('')有区别
vartimer=setInterval(function(){
//substr(index,1)方法在字符串中抽取从index下标开始的一个的字符
varcurrent=str.substr(index,1);
if(current=='<'){
//indexOf()方法返回">"在字符串中首次出现的位置。
index=str.indexOf('>',index)+1;
}else{
index++;
}
//console.log(["0到index下标下的字符",str.substring(0,index)],["符号",index&1?'_':'']);
//substring()方法用于提取字符串中介于两个指定下标之间的字符
$text.html(str.substring(0,index)+(index&1?'_':''));
if(index>=str.length){
clearInterval(timer);
}
},100);
};
$("#autotype").autotype();
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！