JS特效文字逐个显示

听老歌

JS特效文字逐个显示

最近上网看到一个JS特效,让文字逐个在网页上显示,就像手动一个一个输入这些文字一样.把相关的代码copy过来,在本地运行,发现这些JS只在IE在有效,其它浏览器都没有效果,于是本人在此基础上作些改进,让此效果在所有浏览器都有此效果.

以下是网上JS特效源码:

1. <script language="JavaScript1.2">  
   
2. 
   
3. var it=0  
   
4. 
   
5. function initialize(){  
   
6. 
   
7. mytext=typing.innerText  
   
8. 
   
9. var myheight=typing.offsetHeight  
   
10. 
    
11. typing.innerText=''
    
12. 
    
13. document.all.typing.style.height=myheight  
    
14. 
    
15. document.all.typing.style.visibility="visible"
    
16. 
    
17. typeit()  
    
18. 
    
19. }  
    
20. 
    
21. function typeit(){  
    
22. 
    
23. typing.insertAdjacentText("beforeEnd",mytext.charAt(it))  
    
24. 
    
25. if (it<mytext.length-1){  
    
26. 
    
27. it++  
    
28. 
    
29. setTimeout("typeit()",100)  
    
30. 
    
31. }  
    
32. 
    
33. else
    
34. 
    
35. return
    
36. 
    
37. }  
    
38. 
    
39. if (document.all)  
    
40. 
    
41. document.body.onload=initialize  
    
42. 
    
43. </script>  

复制代码

这段代码之所以不跨浏览器,是因为使用IE浏览器所支持的方法:insertAdjacentText,本人在W3Help中找到相关解释,有兴趣的朋友可以去看:
w3help.org/zh-cn/causes/SD9016

文档中给出的方法是在其它浏览器中通过扩展 HTMLElement 的原型 (prototype) 来实现这此方法.
由于本人习惯使用Jqeury,Jqeury本向就解决浏览器兼容性问题,让开发关注于相关JS逻辑的实现.以下是使用Jquery后改进的代码:

1. <script type="text/javascript">  
   
2. 
   
3.     var it = 0;  
   
4. 
   
5.     var mytext;  
   
6. 
   
7.     function initialize() {  
   
8. 
   
9.         mytext = $("#typing").text();  
   
10. 
    
11.         var myheight = $("#typing").offsetHeight;  
    
12. 
    
13.         $("#typing").text("");  
    
14. 
    
15.         $("#typing").css("height", myheight);  
    
16. 
    
17.         $("#typing").show();  
    
18. 
    
19.         typeit();  
    
20. 
    
21. }  
    
22. 
    
23. var t;  
    
24. 
    
25.     function typeit() {  
    
26. 
    
27.         $("#typing").append(mytext.charAt(it));  
    
28. 
    
29.         if (it < mytext.length - 1) {  
    
30. 
    
31.             it++  
    
32. 
    
33.             t = setTimeout("typeit()", 100);  
    
34. 
    
35.         }  
    
36. 
    
37.         else
    
38. 
    
39.             clearTimeout(t);  
    
40. 
    
41.     }  
    
42. 
    
43.     $(document).ready(function () {  
    
44. 
    
45.         initialize();  
    
46. 
    
47.     });  
    
48. 
    
49.     </script>

复制代码

其中的关键方法是append,它把相关text插入匹配元素里面的末尾,这和insertAdjacentText很相似.
相关的HTML代码:

1. <p id="typing" style=" display:none" >

复制代码

InsertAdjacentHTML 方法是比 innerHTML、outerHTML 属性更灵活的插入 HTML 代码的方法。它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置，插入指定的 HTML 代码。不是 W3C 标准的 DOM 方法。  

这个方法最初是由 IE4.0 以上版本实现，为私有特性。详细内容请参见 MSDN 说明：insertAdjacentHTML Method。  

W3C 近期在 HTML5 草案中扩展了这个方法，更多详细的信息，请参见 W3C HTML5 草案：3.5.7 insertAdjacentHTML()。  

</p>
在测试中,本人发现在p如果有其它HTML标记,JS方法会把标记当字符处理

寂寞冲咖啡

好文章，谢谢分离，收藏了啦谢谢