最近上网看到一个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.οnlοad=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);
希望大家愉快