html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>jq 打字效果 </title>
- </head>
- <style type="text/CSS">
- body, html {
- margin: 0;
- height: 100%;
- text-align: center;
- font-family: 'Oxygen Mono', monospace;
- color: #999;
- }
- h1 {
- text-transform: uppercase;
- letter-spacing: 1pt;
- font-size: 30pt;
- margin-bottom: 15px;
- }
- p {
- text-align: left;
- margin: 0;
- text-transform: lowercase;
- font-size: 10pt;
- font-weight: 900;
- width: 50%;
- display: none;
- }
- #table {
- display: table;
- width: 100%;
- height: 100%;
- background-color: #e5e5e5;
- }
- #centeralign {
- display: table-cell;
- vertical-align: middle;
- }
- </style>
- <body>
- <div id="table">
- <div id="centeralign">
- <h1>Sample typing effect.</h1>
<p> 一起来啊 ,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante arcu, dignissim non risus id, posuere efficitur felis. Vestibulum arcu diam, semper non ipsum quis, dictum ultricies diam. Suspendisse vel luctus sapien. Mauris tristique condimentum velit tincidunt pharetra. Curabitur ut lectus eleifend, malesuada lorem eget, consectetur augue. Nunc scelerisque nisi in lacus eleifend eleifend. Praesent blandit ex at nunc maximus, ut sodales ante auctor. Nunc elementum eros sit amet malesuada facilisis. Morbi eget elit consequat, sodales urna in, lobortis nisi. Morbi dapibus velit eu mattis bibendum. Nulla et nisi eget turpis vulputate suscipit eu nec nunc. Pellentesque ut pulvinar quam.</p>
- </div>
- </div>
- </body>
- <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
- <script type="text/javascript">
- function typeEffect(element, speed) {
- var text = $(element).text();
- $(element).html('');
- var i = 0;
- var timer = setInterval(function() {
- if (i <text.length) {
- $(element).append(text.charAt(i));
- i++;
- } else {
- this.clearInterval();
- }
- }, speed);
- }
- $( document ).ready(function() {
- var speed = 75;
- var delay = $('h1').text().length * speed + speed;
- typeEffect($('h1'), speed);
- setTimeout(function(){
- $('p').css('display', 'inline-block');
- typeEffect($('p'), speed);
- }, delay);
- });
- </script>
- </html>
来源: http://www.qdfuns.com/article/40230/7e05e8f50aa2d54863af11982507dc05.html