● 用JavaScript在主页上玩花样 - 荔园在线 | 深圳大学学生论坛,荔园晨风BBS,深大在线网站

荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀

发信人: hawkwolves (十一狼), 信区: Homepage
标  题: 用JavaScript在主页上玩花样
发信站: BBS 荔园晨风站 (Tue Jun  6 11:17:16 2000), 转信

用JavaScript在主页上玩花样
(04/11/2000)

　　　在网上浏览Web页时，经常发现有些主页在下载或关闭时，当鼠标点击或移
过某些图象时，会产生某些特别的效果，如欢迎词、警告语、状态栏提示等等。这
些都是JavaScript的事件响应玩的花样。想不想让你的主页也玩玩花样，给你的主
页锦上添花呢？那么看一看下面JavaScript事件的几个具体应用吧。
　　一、主页欢迎词或提示通知
　　当主页被下载显示时，在主页上浮现一个小小的提示窗口，显示你的欢迎词、
主页更新信息、通知等等。实现方法：
　　在〈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秒后会自动显示下一部分的内容。这个原理就是主页封面的原理，
即定时的自动链接。
　　二、状态栏的链接说明
　　用〈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>
　　三、活动图标
　　某些图像当鼠标移过时会变成一种模样,鼠标移开后复原，单击它时又变成另
一种模样,很有趣。这种技术常用于制作活动图标。通常的实现方法比较复杂,这里
介绍一种简单的实现方法:
　　〈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来实现活动图标,在网络拥挤时可能会
有一点延滞,因此图标的图像不宜过大,否则效果不好。
　　四、送别词
　　给主页做一个送别词，能增加主页的人情味，提高访客的回头率。实现的方法
是用事件处理器onUnLoad。虽然也可以像通知那样开一个小窗口，但是送别词应该
简洁明了，否则会适得其反、令人生厌。这时可以调用window的方法alert(),即显
示一个提示信息框，如：
　　〈body onUnLoad=″alert(‘nn来也匆匆nn去也匆匆nn一路好走!nYou are
always welcome!’)″>
　　当然了，在显示欢迎或通知时也可以调用这种方法，只不过作用和效果就比用
小窗口差一些了。
　　然而，这种以onLoad 或onUnLoad触发的事件处理有一个副作用，就是每当页
面刷新时都会触发事件，有时会令人生厌，因此采用时务必小心谨慎，否则会造成
画蛇添足而不是画龙点睛的作用。至于别的事件处理器的用法，各位可研究探索，
并恰当用在自己的主页上。如果有什么心得和体会，别忘了与大家分享哦！
--
     ┏━┳━┳━┳━┳━┳━┳━┳━┓
     ┃当┃你┃你┃你┃去┃我┃我┃我┃ My e-mail:11_wolf@163.net
     ┃了┃跟┃也┃没┃做┃手┃要┃不┃
     ┃小┃在┃没┃有┃老┃敲┃把┃再┃
   李┃尼┃身┃有┃讲┃和┃木┃你┃烦┃ My homepage:http://192.168.35.20
   敖┃姑┃后┃哭┃话┃尚┃鱼┃忘┃恼┃

※ 来源:·BBS 荔园晨风站 bbs.szu.edu.cn·[FROM: 192.168.35.20]

荔园在线首页友情链接：深圳大学深大招生荔园晨风BBS S-Term软件网络书店