第8讲：JavaScript的鼠标效果与窗口操作初步
8.1 扩展鼠标效果
使用扩展的鼠标效果需要在文件开头的样式表处声明，其格式如下：
cursor：curor_shape;
其中curor_shape表示鼠标的样式，例如cursor：hand;表示手形鼠标，其它的鼠标指针样式见如下列表。
n cursor:hand;（手形）
n cursor:text;（文本）
n cursor：move;（移动）
n cursor：e-eresize;（右箭头）
n cursor：nw-resize;（指向西北的箭头）
n cursor：s-resize;（指向南方的箭头）
n cursor：sw-resize;（指向西南方向的箭头）
n cursor：n-resize;（指向北方的箭头）
n cursor：w-resize;（指向西方的箭头）
n cursor：se-resize;（指向东南方向的箭头）
n cursor：crosshair;（十字形）
n cursor：wait;（等待）
n cursor：help;（帮助）
通过上述鼠标指针样式可方便地设置鼠标指针的显示形状，具体应用示例见〔示例一〕。〔示例一〕
<html><title>鼠标指针样式应用实例</title></head><body>
<h2 align="center"><font color="#FF0000" face="黑体">鼠标指针样式应用实例</font></h2><hr size="1" color="#000000"><p>
<script language="javascript">
<!--
var stylearray=new Array();
stylearray[0]="cursor:hand";
stylearray[1]="cursor:n-resize";
stylearray[2]="cursor:s-resize";
stylearray[3]="cursor:w-resize";
stylearray[4]="cursor:e-resize";
stylearray[5]="cursor:se-resize";
stylearray[6]="cursor:ne-resize";
stylearray[7]="cursor:sw-resize";
stylearray[8]="cursor:nw-resize";
stylearray[9]="cursor:help";
stylearray[10]="cursor:wait";
stylearray[11]="cursor:crosshair";
stylearray[12]="cursor:move";
stylearray[13]="cursor:text";
var namearray=new Array();
namearray[0]="手形";
namearray[1]="向上";
namearray[2]="向下";
namearray[3]="向左";
namearray[4]="向右";
namearray[5]="东南";
namearray[6]="东北";
namearray[7]="西南";
namearray[8]="西北";
namearray[9]="问号";
namearray[10]="等待";
namearray[11]="十字";
namearray[12]="移动";
namearray[13]="文本";
temp=0;
for (i=0;i<stylearray.length;i++)
{
document.write("<a href=# style=",stylearray[i],">",namearray[i],"</a>"," ");
temp++;
if (temp==9)
{
document.write("<p><p>");
temp=0;
}
}
//-->
</script>
</body></html>
鼠标指针样式
图8-1 鼠标样式设置示例
8.2 动态捕获鼠标的坐标
动态捕获鼠标的坐标位置并在文本域中显示鼠标的坐标，具体代码见〔示例二〕，在该示例的代码中，同时兼容IE和NetScape两种浏览器。
〔示例二〕
<html>
<head><title>Welcome...</title></head>
<body>
<form name="show">
X:<input type="text" name="mousex" value="0" size="4"><p>
Y:<input type="text" name="mousey" value="0" size="4">
</form>
<script language="javascript">
<!--
var ie=document.all?true:false;
if (!ie) document.captureEvents(Event.mousemove)
document.onmousemove=getMouseXY;
var tempX=0;
var tempY=0;
function getMouseXY(e)
{
if (ie)
{
tempX=event.clientX+document.body.scrollLeft;
tempY=event.clientY+document.body.scrollTop;
}
else
{
tempX=e.pageX;
tempY=e.pageY;
}
if (tempX<0) {tempX=0;}
if (tempY<0) {tempY=0;}
document.show.mousex.value=tempX;
document.show.mousey.value=tempY;
return true;
}//-->
</script>
</body>
</html>
图8-2 动态捕获鼠标的坐标
8.3 window对象的方法与属性
方法
方法说明
alert
弹出警告框，显示通过参数传递的字符串
back
在窗口中载入上一页面
forward
在窗口中载入下一页面
home
在窗口中载入用户指定的主页
blur
从窗口移出焦点
focus
把焦点设置到指定的窗口
open
打开新窗口
close
关闭窗口
moveBy
把窗口移动指定距离
moveTo
把窗口移动到指定的位置
resizeBy
按照指定的尺寸调整窗口的大小
resizeTo
把窗口调整到指定的尺寸
setTimeout
延迟一定的时间来触发函数计算表达式的值
clearTimeout
清除延迟操作
setInterval
每隔一段时间来触发函数计算表达式的值
clearInterval
消除函数的重复触发操作
scroll
滚动窗口内文档到指定位置
scrollBy
按照指定数量滚动窗口内的文档
scrollTo
滚动窗口，并调整高度和宽度到指定位置
find
显示查询对话框，可以用来查询页面内的内容
confirm
显示确认对话框
prompt
显示提示对话框
stop
停止向窗口内载入项目
激活打印对话框并打印当前窗口
captureEvents
设定窗口属性为捕捉指定类型的所有事件
releaseEvents
放弃已经捕捉的指定类型的事件
hangleEvent
触发指定的事件处理器
routeEvent
传递指定类型事件在本地处理
enableExternalCapture
当从其它服务器载入页面时启动捕捉外部事件的设置
disableExternalCapture
取消对外部事件的捕捉
属性 属性说明
closed 指明窗口是否关闭
defaultValue 窗口状态栏的默认信息
document 窗口内文档的详细信息
frames 窗口内窗格的详细信息
history 用户访问过的历史列表
innerHeight 当前窗口内部显示取余的高度，以像素为单位
innerWidth 当前窗口内部显示取余的宽度，以像素为单位
outerHeight 当前窗口外部显示取余的高度，以像素为单位
outerWidth 当前窗口外部显示取余的宽度，以像素为单位
pageXOffset 当前窗口的x坐标
pageYOffset 当前窗口的y坐标
length 当前窗口内窗格的数目
location 载入窗口的当前的URL信息
locationbar 浏览器的位置栏
statusbar 浏览器的状态栏
status 状态栏的信息
menubar 浏览器的菜单栏
scrollbars 浏览器的滚动条
toolbar 浏览器的工具栏
personalbar 浏览器的个人栏
name 窗口名称
self 当前窗口
window 当前窗口
parent 当前窗格的父窗格
top 当前窗格的最上层窗格
opener 打开“子窗格”的“父窗格”的名称
8.4 窗口的打开、焦点的获取与移出
窗口的打开、焦点的获取，其目的是对目标窗口进行相应的操作，其应用见〔示例三〕。〔示例三〕
<html><head><title>Welcome...</title><script language="javascript">
<!--
var winname;
function openwin()
{
var text=document.form.textname.value;
var result_win=open();
result_win.document.writeln(text);
}
function toson()
{
window.blur();
window.focus();
}
//-->
</script>
</head>
<body>
<form name="form">
<textarea rows="8" cols="40" name="textname"></textarea>
<p>
<input type="button" value="Open Window" onclick="openwin()">
<input type="button" value="To Window" onclick="toson()">
</form></body></html>
图8-3
JavaScript的鼠标效果与窗口操作初步
