电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> Javascript>>第8讲:JavaScript的鼠标效果与窗口操作初步:

第8讲:JavaScript的鼠标效果与窗口操作初步

来源:远方网络 | 2006-1-2 17:17:16 | (有2890人读过)

第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>





Javascript热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2024 电脑爱好者 版权所有 备案号:鲁ICP备09059398号