温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery如何实现打字机效果

发布时间:2021-06-24 14:54:24 来源:亿速云 阅读:144 作者:小新 栏目:web开发

这篇文章主要介绍了jQuery如何实现打字机效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

实例代码:

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

感谢你能够认真阅读完这篇文章,希望小编分享的“jQuery如何实现打字机效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI