Jquery--实现打字效果

一、jquery实现打字效果
(1)代码

<head>
  <meta charset="UTF-8">
  <title>打字效果</title>
  <style>
   #aa {
    
    
    height: auto;
    width: 100%;
    margin: auto;
   }
  </style>
 </head>
 <body>
  <p id="aa"></p>
  <div style="display:none" id="w">
   你不知道你的影子多么调皮,总在我的眼前晃动,让我不能有一刻安宁。坏男孩从早上睁开朦胧眼睛的那一刻起,到枕着你的名字入眠进入梦乡,你的影子一直陪着我。 你并不是什么地方都好,你只是什么地方都让我忘不了,我也不是什么地方都坏,只是我愿意为你把坏的地方更改,人无完人,我要感谢上天给我与你相遇的幸运,心有真心,让我们一起走进向往中的春。
  </div>
 </body>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
 <script>
        var index=0;
        var word =$('#w').text();
        console.log(word);
        function type(){
    
    
         $('#aa').text(word.substring(0,index++));//从0开始逐一加入,开始打出来
        }
        setInterval(type,200);//定时器
 </script>

(2)效果图
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/huang_jimei/article/details/107483394