码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现的打字机效果

时间:2018-01-23 18:15:07      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:ext   bst   else   col   type   baidu   com   效果   lib   

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>基于jQuery实现的打字机效果</title>
 6 <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
 7 <style>
 8 </style>
 9 </head>
10 <body>
11 <div class="autotype" id="autotype">
12  <p>一场雨把我困在这里</p>
13  <br>
14  <p>你温柔的表情</p>
15  <p>会让我伤心</p>
16  <br>
17  <p>六月的雨,只是无情的你~</p>
18 </div>
19 
20 <script>
21 $.fn.autotype = function() {
22     var $text = $(this);
23     console.log(this, this);
24     var str = $text.html(); //返回被选 元素的内容
25     var index = 0;
26     var x = $text.html(‘‘);
27     //$text.html()和$(this).html(‘‘)有区别
28     var timer = setInterval(function() {
29         //substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符
30         var current = str.substr(index, 1);
31         if (current == <) {
32             //indexOf() 方法返回">"在字符串中首次出现的位置。
33             index = str.indexOf(>, index) + 1;
34         } else {
35             index++;
36         }
37         //console.log(["0到index下标下的字符",str.substring(0, index)],["符号",index & 1 ? ‘_‘: ‘‘]);
38         //substring() 方法用于提取字符串中介于两个指定下标之间的字符
39         $text.html(str.substring(0, index) + (index & 1 ? _: ‘‘));
40         if (index >= str.length) {
41             clearInterval(timer);
42         }
43     },
44     100);
45 };
46 $("#autotype").autotype();
47 </script>
48 
49 </body>
50 </html>

 

jQuery实现的打字机效果

标签:ext   bst   else   col   type   baidu   com   效果   lib   

原文地址:https://www.cnblogs.com/Sinhtml/p/8336970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!