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

js 打字机效果

时间:2015-08-11 17:37:04      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ChineseDictionary.WebForm1" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title></title>
 9     <script src="Scripts/jquery-2.1.4.min.js"></script>
10    <script type="text/javascript">
11        var it = 0;
12        var mytext;
13        function initialize() {
14            mytext = $("#typing").text();
15            var myheight = $("#typing").offsetHeight;
16            $("#typing").text("");
17            $("#typing").css("height", myheight);
18            $("#typing").show();
19            typeit();
20        }
21        var t;
22        function typeit() {
23            $("#typing").append(mytext.charAt(it));
24            if (it < mytext.length - 1) {
25                it++
26                t = setTimeout("typeit()", 100);
27            }
28            else
29                clearTimeout(t);
30        }
31 
32        //function typeit(_this){
33        //    var $ele = $("#typing"), str = $ele.html(), progress = 0;
34        //    $ele.html(‘‘);
35        //    var timer = setInterval(function() {
36        //        var current = str.substr(progress, 1);
37        //        if (current == ‘<‘) {
38        //            progress = str.indexOf(‘>‘, progress) + 1;
39        //        } else {
40        //            progress++;
41        //        }
42        //        //下面是在模拟光标              
43        //        $ele.html(str.substring(0, progress) + (progress & 1 ? ‘_‘ : ‘‘));
44        //        if (progress >= str.length) {
45        //            clearInterval(timer);
46        //        }
47        //    }, 75);
48        $(document).ready(function () {
49            initialize();
50        });
51     </script>
52 </head>
53 <body>
54     <form id="form1" runat="server">
55     <div>
56     <p id="typing" style=" display:none" >
57 InsertAdjacentHTML 方法是比 innerHTML、outerHTML 属性更灵活的插入 HTML 代码的方法。它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置,插入指定的 HTML 代码。不是 W3C 标准的 DOM 方法。
58 这个方法最初是由 IE4.0 以上版本实现,为私有特性。详细内容请参见 MSDN 说明:insertAdjacentHTML Method。
59 W3C 近期在 HTML5 草案中扩展了这个方法,更多详细的信息,请参见 W3C HTML5 草案:3.5.7 insertAdjacentHTML()。
60 </p>
61     </div>
62     </form>
63 </body>
64 </html>

 

js 打字机效果

标签:

原文地址:http://www.cnblogs.com/lyl6796910/p/4721205.html

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