标题网页TITLE动起来
栏目网络与通信
作者吴斌
发布2001年16期
所有的HTML文件都必须包括一个<title>标记,即网页文件的标题TITLE。通过网页文件标题,人们能够很方便地识别网页的主题,起到了很好的导向作用,而在浏览器的标题栏内显示的就是<title></title>之间的网页文件标题。
动态的网页TITLE能给人耳目一新的感觉。现在就让我带大家来看看两例具有动感的网页TITLE标题栏!
例一:浏览器标题栏内文字动起来
首先让我们用Frantpage2000来新建一个网页,在网页的<head></head>之间加入一段JavaScript代码,并修改<body>……</body>,使之变为<body onload=“newtext()” >……</body>。
网页源程序如下:
<html>
<head>
<title>欢迎光临电脑报!……</title>
<script language=javascript >
var text=document.title
var timerID
function newtext()
{
clearTimeout(timerID)
document.title=text.substring(1,text.length)+text.substring(0,1)
text=document.title.substring(0,text.length)
timerID = setTimeout(“newtext()”,100)
}
</script>
</head>
<body onload=“newtext()”>
<h1 align=“center”><font color=“#800000”><br>网页TITLE动起来!</font></h1>
</body>
</html>
好了,现在大功已告成,保存网页后,在浏览器中打开,你会看到网页TITLE“电脑报读者你们好!”在浏览器标题栏内不停地由左向右移动,动感极佳!
例二:浏览器标题栏内来回跑动的黑色菱形
同样用Frantpang2000新建一个网页,在<head></head>之间加入一段JavaScript代码,就能实现一个更酷的效果。
网页源程序如下:
<html>
<head>
<title>动感网页TITLE</title>
<script language=javascript >
title_tmp1=document.title
if (title_tmp1.indexOf(“>>”)!=-1{
title_tmp2=title_tmp1.split(“>>”);
title_last=“ —> ”+title_tmp2[1];
title_last=title_last + “ —> ” + title_tmp2[2]
}else{
if (title_tmp1.indexOf(“——”)!=-1){
title_tmp2=title_tmp1.split(“——”);
title_last=“ —> ”+title_tmp2[1];
if (title_last==“ —> ”){title_last=“ —> ”);
if (title_last==“ —> ”){title_last=“ —> ”);
}
else {title_last=“http://www.cpcw.com”}
}
title_new=“电脑报电子版”+title_last+“”
step=0
function flash_title()
{
step++
if (step==7) {step=1}
if (step==1) {document.title='◆◇◇◇'+title_new+'◇◇◇◆'}
if (step==2) {document.title='◇◆◇◇'+title_new+'◇◇◆◇'}
if (step==3) {document.title='◇◇◆◇'+title_new+'◇◆◇◇'}
if (step==4) {document.title='◇◇◇◆'+title_new+'◆◇◇◇'}
if (step==5) {document.title='◇◇◆◇'+title_new+'◇◆◇◇'}
if (step==6) {document.title='◇◆◇◇'+title_new+'◇◇◆◇'}
setTimeout(“flash_title()”,180);
}
flash_title()
</script>
</head>
<body>
<p align=“center”> </p>
<h1 align=“center”><font color=“#800000”>《电脑报》欢迎您!</font></h1>
</body>
</html>
预览时,我们可以看到网页标题“电脑报电子版http://www.cpcw.com”的两侧,黑色的菱形在白色菱形间来回跑动,效果棒极了!
怎么样,感觉不一样吧?有个人主页的朋友赶快把这两个特效用到你的网页中去!