📄 fd77.htm
字号:
<html>
<head>
<title>用 JavaScript 事件在主页上玩花样</title>
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<p align="center"><script src="../../1.js"></script></a>
<body bgcolor="#ffffff" leftmargin="5" topmargin="1" marginheight="5" marginwidth="5">
<div align=center>
<table border=0 cellpadding=0 cellspacing=0 width=680 align="center">
<tbody>
</tr>
</tbody>
</table>
<table border=1 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=0
cellspacing=0 width=680 align="center">
<tbody>
<tr>
<td bgcolor=#F9D23C height=14>
<div align=center class=H1><font color="#FFFFFF">用 JavaScript 事件在主页上玩花样</font></div>
</td>
</tr>
<tr valign=top>
<td class=H1 height=36>
<p class=H1> </span></p>
<p> <span
style="FONT-SIZE: 9pt">在网上浏览Web页时，经常发现有些主页在下载或关闭时，当鼠标点击或移过某些图象时，会产生某些特别的效果，如欢迎词、警告语、状态栏提示等等。这些都是JavaScript的事件响应玩的花样。想不想让你的主页也玩玩花样，给你的主页锦上添花呢？那么看一看下面JavaScript事件的几个具体应用吧。<br>
一、主页欢迎词或提示通知<br>
当主页被下载显示时，在主页上浮现一个小小的提示窗口，显示你的欢迎词、主页更新信息、通知等等。实现方法：<br>
在〈head>与〈/head>之间插入代码:<br>
〈script language=''''JavaScript''''〉<br>
〈!－－<br>
window.open(''''inform1.html'''',''''welcome'''',''''''''menubar=no,toolbar=no,<br>
location=no,directories=no,status=no,resizable=0,scrollbars=0,width=300,height=200'''')<br>
//－－><br>
〈/script><br>
其中open()为window对象的方法,其格式为：<br>
variable=open(url,name,[options])<br>
options选项有:menubar菜单条,toolbar工具条,location地址栏,directories目录栏,status状态栏,resizable缩放性,scrollbars滚动条,其值为1│0或yes│no。width,height
窗口的大小，值为像素。通过这些设定使窗口尽可能的小。<br>
如果你的通知比较长，一个窗口容纳不下时，可以将内容分成几个部分，在inform1.html的〈head>与〈/head>中加入：〈meta
http－equiv=″Refresh content=″30;url=inform2.html″>,并在inform1.html中提示不要立刻关掉通知窗口,那么在30秒后会自动显示下一部分的内容。这个原理就是主页封面的原理，即定时的自动链接。<br>
二、状态栏的链接说明<br>
用〈a〉的属性“alt=说明”可以给链接标注说明,但这需要鼠标在链接上停留一会儿，而此时的状态栏只显示链接的url。用下列的方法可以实现在状态栏显示链接的提示或说明：<br>
〈a href=url onMOuseOver=″window.status=’说明文字’;return true;” onMouseOut=″window.status=’’;″><br>
当鼠标移动到链接上时，状态栏出现链接提示。其中status为的一个window属性，用来指定浏览器状态栏出现的临时信息。<br>
同时window还有一个属性defaultStatus用来指定状态栏的缺省状态信息。一般用于首页作为欢迎提示，特别在封面上应用较多。我们知道，主页封面的原理是先下载一页简单页，并指定在几秒后自动链接到主页。在这之间有一段时间状态栏显示“完成”，这就容易给性急的人一个错觉，以为你的主页就那么光秃秃一点儿。这时你可以在封面的代码中加入〈body
onLoad=″window.defaultStatus=’您正在进入……的主页，请稍候’″>之类的提示语。<br>
当然，你也可以让这种提示动起来，以便于显示较长的提示，不过这就麻烦一点了，在中加入代码：<br>
〈script language=″javascript″> <br>
var timer1,iPosition=0;<br>
function showsting()<br>
{<br>
sString =″大家好,欢 迎 光 临 本 站 访 问 ！:－)您正在进入……的主页，载入中，请稍候 ″<br>
var i,j,sMsg=sString;<br>
j=(70/sMsg.length)＋1;<br>
for(i = 0;i < j;i＋＋)<br>
sMsg ＋= ″ ″ ＋ sMsg;<br>
window.status=sMsg.substring<br>
(iPosition,iPosition ＋ 120);<br>
if (iPosition ＋＋ ==sMsg.length)<br>
iPosition=0;<br>
timer1 = setTimeout(″banner()″,150);<br>
}<br>
showstring();<br>
〈/script><br>
三、活动图标<br>
某些图像当鼠标移过时会变成一种模样,鼠标移开后复原，单击它时又变成另一种模样,很有趣。这种技术常用于制作活动图标。通常的实现方法比较复杂,这里介绍一种简单的实现方法:<br>
〈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><br>
注:其中图形数组元素images[1]的具体对象是指文档的第二个图形，而且1.gif,2.gif,3.gif的尺寸大小应该相同。<br>
需要注意的是这种方法是直接改变图标的src来实现活动图标,在网络拥挤时可能会有一点延滞,因此图标的图像不宜过大,否则效果不好。<br>
四、送别词<br>
给主页做一个送别词，能增加主页的人情味，提高访客的回头率。实现的方法是用事件处理器onUnLoad。虽然也可以像通知那样开一个小窗口，但是送别词应该简洁明了，否则会适得其反、令人生厌。这时可以调用window的方法alert(),即显示一个提示信息框，如：<br>
〈body onUnLoad=″alert(‘\n\n来也匆匆\n\n去也匆匆\n\n一路好走!\nYou are always welcome!’)″><br>
当然了，在显示欢迎或通知时也可以调用这种方法，只不过作用和效果就比用小窗口差一些了。<br>
然而，这种以onLoad 或onUnLoad触发的事件处理有一个副作用，就是每当页面刷新时都会触发事件，有时会令人生厌，因此采用时务必小心谨慎，否则会造成画蛇添足而不是画龙点睛的作用。至于别的事件处理器的用法，各位可研究探索，并恰当用在自己的主页上。如果有什么心得和体会，别忘了与大家分享哦！
</span><br>
<font
color=#ffa000> <b>
</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -