来源:远方网络 | 2006-1-2 17:17:16 | (有3041人读过)
第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 停止向窗口内载入项目 print 激活打印对话框并打印当前窗口 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>
|