JS特效文字逐个显示

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

以下是网上JS特效源码:

<script language="JavaScript1.2">
var it=0
function initialize(){
mytext=typing.innerText
var myheight=typing.offsetHeight
typing.innerText=''
document.all.typing.style.height=myheight
document.all.typing.style.visibility="visible"
typeit()
}
function typeit(){
typing.insertAdjacentText("beforeEnd",mytext.charAt(it))
if (it<mytext.length-1){
it++
setTimeout("typeit()",100)
}
else
return
}
if (document.all)
document.body.onload=initialize
</script>
这段代码之所以不跨浏览器,是因为使用IE浏览器所支持的方法:insertAdjacentText,本人在W3Help中找到相关解释,有兴趣的朋友可以去看:

w3help.org/zh-cn/causes/SD9016

文档中给出的方法是在其它浏览器中通过扩展 HTMLElement 的原型 (prototype) 来实现这此方法.

由于本人习惯使用Jqeury,Jqeury本向就解决浏览器兼容性问题,让开发关注于相关JS逻辑的实现.以下是使用Jquery后改进的代码:

<script type="text/javascript">
    var it = 0;
    var mytext;
    function initialize() {
        mytext = $("#typing").text();
        var myheight = $("#typing").offsetHeight;
        $("#typing").text("");
        $("#typing").css("height", myheight);
        $("#typing").show();
        typeit();
}
var t;
    function typeit() {
        $("#typing").append(mytext.charAt(it));
        if (it < mytext.length - 1) {
            it++
            t = setTimeout("typeit()", 100);
        }
        else
            clearTimeout(t);
    }
    $(document).ready(function () {
        initialize();
    });
    </script>

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

相关的HTML代码:

<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方法会把标记当字符处理.

最近本人对JS其方法进行改进,让它支持HTML标记.

function typeit(_this){
			var $ele = $(_this), str = $ele.html(), progress = 0;
			$ele.html('');
			var timer = setInterval(function() {
				var current = str.substr(progress, 1);
				if (current == '<') {
					progress = str.indexOf('>', progress) + 1;
				} else {
					progress++;
				}
//下面是在模拟光标				

$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
				if (progress >= str.length) {
					clearInterval(timer);
				}
			}, 75);

希望大家愉快