用JavaScript在主页上玩花样

刘瑜
2000年 第35期 

　　在网上浏览Web页时，经常发现有些主页在下载或关闭时，当鼠标点击或移过某些图像时，会产生某些特别的效果，如欢迎词、警告语、状态栏提示等等。这些都是JavaScript的事件响应玩的花样。想不想让你的主页也玩玩花样，给你的主页锦上添花呢？那么看一看下面JavaScript事件的几个具体应用吧。
#1    一、主页欢迎词或提示通知
　　当主页被下载显示时，在主页上浮现一个小小的提示窗口，显示你的欢迎词、主页更新信息、通知等等。
　　实现方法：
　　在〈head>与〈／head>之间插入代码:
　　〈script language=″JavaScript″〉
　　〈!－－
　　window.open（″inform1.html″，″welcome″，″menubar=no，toolbar=no，　　location=no，directories=no，status=no，resizable=0，scrollbars=0，width=300，height=200″）
　　／／－－>
　　〈／script>
　　其中open（）为window对象的方法，其格式为：
　　variable=open（url，name，[options]）
　　options选项有:menubar菜单条，toolbar工具条，location地址栏，directories目录栏，status状态栏，resizable缩放性，scrollbars滚动条，其值为1/0或yes/no。width，height窗口的大小，值为像素。通过这些设定使窗口尽可能的小。
　　如果你的通知比较长，一个窗口容纳不下时，可以将内容分成几个部分，在inform1.html的〈head>与〈／head>中加入：〈meta http－equiv=Refresh content=″30″;url=″inform2.html″>，并在inform1.html中提示不要立刻关掉通知窗口，那么在30秒后会自动显示下一部分的内容。
#1    二、状态栏的链接说明
　　用〈a〉的属性“alt=说明”可以给链接标注说明，但这需要鼠标在链接上停留一会儿，而此时的状态栏只显示链接的url。用下列的方法可以实现在状态栏显示链接的提示或说明：
    〈a href=url onMOuseOver=″window.status=′说明文字′;return true;″onMouseOut=″window.status=′′;″>
　　当鼠标移动到链接上时，状态栏出现链接提示。其中status为的一个window属性，用来指定浏览器状态栏出现的临时信息。
　　同时Window还有一个属性defaultStatus用来指定状态栏的缺省状态信息。一般用于首页作为欢迎提示。我们知道，主页封面的原理是先下载一页简单页，并指定在几秒后自动链接到主页。在这之间有一段时间状态栏显示“完成”，这就容易给性急的人一个错觉，以为你的主页就那么光秃秃一点儿。这时你可以在首页的代码中加入〈body onLoad=″window.defaultStatus=′您正在进入……的主页，请稍候′″>之类的提示语。
　　当然，你也可以让这种提示动起来，以便于显示较长的提示，在中间加入代码：
　　〈script language=″javascript″>
　　var timer1，iPosition=0;
　　function showsting（）
　　{
　　sString =″大家好，欢迎光临本站访问！:－）您正在进入……的主页，载入中，请稍候″
　　var i，j，sMsg=sString;
　　j=（70／sMsg.length）＋1;
　　for（i = 0;i < j;i＋＋）
　　sMsg＋=″″＋sMsg;
　　window.status=sMsg.substring
　　（iPosition，iPosition＋120）;
　　if （iPosition＋＋==sMsg.length）
　　iPosition=0;
　　timer1 = setTimeout（″banner（）″，150）;
　　}
　　showstring（）;
　　〈／script>
#1    三、活动图标
　　某些图像当鼠标移过时会变成一种模样，鼠标移开后复原，单击它时又变成另一种模样，很有趣。这种技术常用于制作活动图标。通常的实现方法比较复杂，这里介绍一种简单的实现方法:
　　〈a href=url target=″_blank″   onMouseOver=″document.images[1].src=″1.gif  ″  onMouseOut= ″document.images[1].src=″2.gif″   onClick=″document.images[1].src=″3.gif″>〈img src=″1.gif″>〈／a>
　　注:其中图形数组元素images[1]的具体对象是指文档的第二个图形，而且1.gif，2.gif，3.gif的尺寸大小应该相同。
　　需要注意的是这种方法是直接改变图标的src来实现活动图标，在网络拥挤时可能会有一点延滞，因此图标的图像不宜过大，否则效果不好。
#1    四、送别词
　　给主页做一个送别词，能增加主页的人情味，提高访客的回头率。实现的方法是用事件处理器onUnLoad。虽然也可以像通知那样开一个小窗口，但是送别词应该简洁明了，否则会适得其反、令人生厌。这时可以调用Window的方法alert（），即显示一个提示信息框，如：
　　〈body onUnLoad=″alert（′nn来也匆匆nn去也匆匆nn一路好走!nYou are always welcome!′）″>
　　当然了，在显示欢迎或通知时也可以调用这种方法，只不过作用和效果就比用小窗口差一些了。
　　然而，这种以onLoad或onUnLoad触发的事件处理有一个副作用，就是每当页面刷新时都会触发事件，有时会令人生厌，因此采用时务必小心谨慎。

 