基于jQuery实现的打字机效果

2019-11-19 17:55:45

字体：大中小

来源：转载

供稿：网友

话不多说，请看实例代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="keyword" content=""><meta name="description" content=""></head><body><div class="autotype" id="autotype"> <p>一场雨把我困在这里</p> <br/> <p>你温柔的表情</p> <p>会让我伤心</p> <br/> <p>六月的雨，只是无情的你~</p></div><script src="http://file2.ci123.com/ast/js/jquery_172.js"></script><script> $.fn.autotype = function(){  var $text = $(this);  console.log('this',this);  var str = $text.html();//返回被选 元素的内容  var index = 0;  var x = $text.html('');  //$text.html()和$(this).html('')有区别  var timer = setInterval(function(){   //substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符   var current = 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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Javascript中document.referrer隐藏来源的方法

下一篇：JS实现的验证身份证及获取地区功能示例