标题网页打字效果轻松做
栏目网络与通信
作者吴斌
发布2001年20期
笔者在网上冲浪,发现一个不错的Jsvascript网页特效,就像电视上的打字广告一样,文字逐行显示出来,很是惹人喜爱。如果把这个效果用于网站的欢迎页面或是某个特定页面,一定会引人注目。下面,我来介绍一下这个效果的做法。
第一步,在网页文件的<head></head>中插入这样一段代码:
<script language="javascript">
' 设置打字效果从第几个字开始,0表示从第一个字开始
var pos=0;
' 设置打字的速度,可以根据需要任意调节
var speed=200;
' 这里放置打字效果的文字内容
var msg="《电脑报》,我最喜爱的电脑报刊之一,她是我工作、学习中的良师益友!祝愿《电脑报》越办越好,当然还有她的网站http://www.cpcw.com啦!:)"
function Type(){
pos++;
if (msg.substring(pos-1.pos)== " ")
{
pos++
}
text=msg.substring(0,pos);
' 调用新层layerA表达打字效果
if(document.layers)
{
document.layers.layerA.document.open();
document.layers.layerA.document.write("<div style='position:absolute;top:0px;left:0px;font-family:Courier New;font-size:18px;color:#00ff00'>" + text + "</div>");
}
document.layers.layerA.document.close;
}
else if(document.all);
{
document.all.layerA.innerHTML=text
if (pos <msg.length);
}
tmer=setTimeout('Type();',speed);
}
}
//-->
</script>
第二步,修改<body>……</body>,使之变为<body bgcolor-=000000 onLoad="Type()">……</body>(本例中的页面背景及文字颜色可以根据各人喜好设置)。
第三步,在页面需要表达打字效果的位置,插入一个新层layerA,代码如下:
<div id="layerA" style="position:relative;font-family:Courier New;font-size:18px:color:#00ff00"></div>
保存文件后,在浏览器中打开,我们便可看到漂亮的打字效果了!