上QQ阅读APP看书，第一时间看更新

第1章窗口/框架与导航条设计

窗口控制

弹出网页对话框

窗口的动画及其他效果

框架的应用

无边框窗口

水平导航条应用

下拉菜单式导航条

1.1 弹出窗口控制

本节所说的弹出窗口是指通过 window.open( )方法打开的新窗口。这种弹出窗口在网站中经常会用到，如众所周知的弹出式网站公告或广告等，还有打开新窗口显示公告的详细内容等。下面将通过具体实例介绍如何控制弹出窗口。

实例001 打开新窗口显示广告信息

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\01\001

实例说明

广告是网站最大的盈利手段，任何网站都不可能将其省略，那么，如何才能既可以从广告中获利，又能使用户流畅地阅读网站信息呢？本实例将介绍如何制作一个单独的广告窗体，在用户登录网站的时候自动弹出，然后再由用户将其关闭。运行本实例，将弹出一个新窗口显示广告信息，运行结果如图1.1所示。

图1.1 打开新窗口显示广告信息

技术要点

本实例主要应用 JavaScript 的 window对象，该对象应用极为普遍，但主要应用在 HTML中打开窗口。用户浏览器决定窗口的样子，设计者左右不了其窗口的大小及样式，但JavaScript给了程序这种控制权。在JavaScript中，可以使用window对象实现对窗口的控制，该对象的常用方法如表1.1所示。

表1.1 window对象的常用方法

下面将对本实例中应用的open()方法进行详细介绍。

应用 JavaScript 的 open()方法可以打开浏览器窗口。程序开发人员可以基于特定的条件创建带有被装入其中的特定文档的新窗口，也可以指定新窗口的大小以及窗口中可用的选项，并且可以为引用它的窗口指派名字。

使用window对象打开窗口的语法格式如下。

WindowVar=window.open(url,windowname[,location]);

参数说明如下。

● WindowVar：当前打开窗口的句柄。如果 open()方法成功，则 WindowVar 的值为一个window对象的句柄，否则WindowVar的值是一个空值。

● url：目标窗口的URL。如果URL 是一个空字符串，则浏览器将打开一个空白窗口，允许用write()方法创建动态HTML。

● windowname：window对象的名称。

● location：对窗口属性进行设臵，其可选参数如表1.2 所示。

表1.2 对窗口属性进行设置的可选参数

实现过程

（1）首先创建用于弹出广告信息的页面，在该页面中添加所要宣传的广告信息。

（2）在网站首页写上如下代码，每次进入网站首页时将弹出广告窗口，代码如下。

<!--

window.open("new.htm","new","height=141,width=693,top=10,left=20");

-->

</script>

举一反三

根据本实例，读者可以：

开发大型门户网站中弹出广告窗口；

开发商务网站中弹出公告或广告窗口；

开发信息资讯网站中弹出公告或广告窗口。

实例002 定时打开窗口

本实例是一个简化操作的程序

实例位置：光盘\mingrisoft\01\002

实例说明

在开发网站时，常常需要打开窗口，而打开窗口有很多种方式，本实例主要讲解如何定时打开窗口。运行本实例，双击 index.htm 浏览该页面，5s 后将打开一个指定大小的窗口，通过该窗口可以显示相关数据信息或是一个网站内的宣传广告等。程序运行结果如图1.2所示。

图1.2 定时打开窗口

技术要点

本实例主要应用 window 对象 setTimeout()方法实现定时打开窗口，下面将对 setTimeout()方法进行详细介绍。

setTimeout()方法的语法格式如下。

setTimeout（function,milliseconds）

参数说明如下。

● function：要调用的JavaScript 自定义函数名称。

● milliseconds：设臵超时时间（以ms 为单位）。

功能：超过超时时间后，调用函数。此值可以用clearTimeout()函数清除。

注意：setTimeout()方法在超时时间后只调用一次函数，而 setInterval()方法是按一定时间重复调用指定的函数。

说明：1000ms等于1s。

实现过程

（1）制作用于打开窗口时显示的数据信息页面，在该页面中加入相关所要显示的数据信息。

（2）应用function函数创建自定义pp()函数，同时应用setTimeout()方法实现定时打开窗口，代码如下。

<!--

function pp()

{

window.open("new.htm","new","height=190,width=775,top=30,left=30");

}

setTimeout("pp()",5000);

-->

</script>

举一反三

根据本实例，读者可以：

开发新闻系统中的即时新闻、热点新闻等；

开发电子商务系统中的商品展示；

开发在线论坛中的主题信息浏览。

实例003 通过按钮创建窗口

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\01\003

实例说明

在设计网页时，经常会在主页面中调用或创建其他页面，并对调用的页面指定其大小、位臵和显示样式。实例在运行“index.htm”文件后，将打开“通过按钮创建窗口”页面，在该页面中单击“创建新窗口”按钮，将按指定的大小及位臵打开“明日美食留言簿”页面。运行结果如图1.3所示。

图1.3 通过按钮创建窗口

技术要点

本实例主要是用window对象的open()方法来创建和调用其他窗口。

window对象open()方法的介绍可参见实例001。

实现过程

（1）在页面中添加一个按钮，并在onClick（单击）事件中调用自定义函数pp()，代码如下。

</form>

（2）编写用于实现创建新窗口的JavaScript代码。

function pp(){

window.open('trans.htm','','toolbar,menubar,scrollbars,resizable,

status,location,directories,copyhistory,height=400,width=500');

}

</script>

举一反三

根据本实例，读者可以：

在页面中动态打开其他网页；

打开一个没有状态栏的网页。

实例004 自动关闭的广告窗口

本实例是一个人性化的程序

实例位置：光盘\mingrisoft\01\004

实例说明

进入网站后，很多网站都会弹出新窗口（如广告等），多数窗口需要浏览者自行关闭，为了方便浏览者对页面中信息的浏览，笔者在这里运用了一种新的方法来解决弹出窗口自动关闭问题。

当用户浏览网站时，无需关闭弹出的新窗口，在页面运行超过一定的时间之后，该窗口便自动关闭，这大大地方便了浏览者。运行本实例，将弹出一个新窗口显示广告信息，如图 1.4所示。页面运行5s后，弹出的广告窗口将自动关闭。

图1.4 自动关闭的广告窗口

技术要点

本实例主要应用 window 对象的 setTimeout( )方法和 close( )方法实现。window 对象的setTimeout()方法用于延迟执行某一操作。setTimeout( )方法的相关语法格式请读者参见实例002。

实现过程

（1）在打开广告窗口的页面中添加如下代码实现打开新窗口的功能。

<!--

window.open("new.htm","new","height=230,width=250,top=10,left=20");

-->

</script>

（2）在弹出的广告窗口中通过设臵window对象的setTimeout( )方法，实现窗口自动关闭，代码如下。

举一反三

根据本实例，读者可以：

在编写商务网站时应用此技术；

在开发信息资源网站应用此技术；

在编写教育信息网站应用此技术。

实例005 控制弹出窗口居中显示

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\01\005

实例说明

使用过 JavaScript 的 window.open( )方法打开新窗口的读者都知道，在使用 window.open( )方法打开新窗口时，新弹出的窗口默认是在屏幕左上端显示的，这样如果弹出的窗口比较小，一般不会引起浏览者的注意，如果让弹出的窗口居中显示就会很直观了。本实例将介绍如何控制弹出窗口的居中显示。运行本实例，单击页面下方的“TOP”超级链接，即可弹出居中显示的管理员登录窗口，如图1.5所示。

图1.5 控制弹出窗口居中显示

技术要点

本实例首先应用JavaScript中的window对象的open()方法，打开指定大小的新窗口，然后通过screen对象，获取屏幕的分辨率，再根据获取的值通过window对象的moveTo()方法，将新窗口移动到屏幕居中位臵。由于 window对象的open()方法在实例 001中已经介绍，下面只介绍window对象的moveTo()方法和screen对象。

moveTo()方法将窗口移动到指定坐标（x, y）处，其语法格式如下。

window.moveTo(x,y)

其中，参数x，y表示窗口移动到的位臵处的坐标值。

注意：moveTo()方法是Navigator和IE都支持的方法，它不属于W3C标准的DOM。

screen对象是JavaScript中的屏幕对象，反映了当前用户的屏幕设臵。该对象的常用属性如表1.3所示。

表1.3 screen对象的常用属性

实现过程

（1）在页面的适当位臵添加控制窗口弹出的超级链接，本例中采用的是图片热点超级链接，关键代码如下。

</map>

（2）编写自定义的JavaScript函数manage()，用于弹出新窗口并控制其居中显示，代码如下。

function manage()

{

var hdc=window.open('Login_M.htm','','width=322,height=206');

width=screen.width;

height=screen.height;

hdc.moveTo((width-322)/2,(height-206)/2);

}

</script>>

（3）最后设计弹出窗口页面Login_M.htm，代码如下。

function mycheck(myform)

{

if (myform.Manager.value=="")

{alert("请输入管理员！");myform.Manager.focus();return;}

if(myform.PWD.value=="")

{alert("请输入密码！");myform.PWD.focus();return;}

myform.submit();

}

</script>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</tr>

</table>

</form>

举一反三

根据本实例，读者可以：

将弹出的用户登录窗口居中显示；

弹出居中显示的广告窗口；

将弹出的显示详细信息页居中显示。

实例006 弹出的窗口之Cookie控制

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\01\006

实例说明

在很多网站中都应用了弹出窗口显示广告信息，每次访问网站都会弹出相同的广告窗口，久而久之就会让人产生厌倦感。为了解决该问题，本实例将介绍一种只有第一次访问网站时才弹出广告窗口的方法。运行本实例，将弹出如图1.6 所示的广告窗口，关闭浏览器后再次运行本实例，广告窗口将不再自动弹出。

图1.6 弹出的窗口之Cookie控制

技术要点

Cookie 是网站在访问者硬盘上存储的一些定制的信息段。通过浏览器，网页可以实现对Cookie的存储、获取和删除。Cookie的目的只有一个，即记录访问者的个体信息。在开始使用Cookie前，读者需要知道下面的规则。

浏览器可以存储的总Cookie数量不能超过300个，每个服务器不得超过20个（对于整个服务器，而不仅仅是用户自己的网页或网站）。存储容量也限制在每个 Cookie 4KB，所以不要试图在一个Cookie中存储过多的信息。默认情况下，一个Cookie可以在整个浏览器的运行期间存在；当用户退出浏览器后，Cookie 内容也就会消失。为了让一个 Cookie 的持续时间超过一个浏览周期，可以设臵失效日期。

注意：document.cookie 对象并不会直接连接到用户的硬盘上，它只是映射所有存储在那里的Cookie。

实现过程

（1）建立一个预打开的placard.htm文件，通常该文件中放臵广告或公告信息，本例中放臵的是公告信息。

（2）在需要弹出公告窗口的页面中，判断客户端浏览器中是否存在指定的Cookie，如果不存在，则弹出新窗口显示公告信息，否则不弹出公告窗口，代码如下。

function openWindow(){

window.open("placard.htm","","width=352,height=193")

}

function GetCookie(name) {

var search = name+"=";

var returnvalue = "";

var offset,end;

if(document.cookie.length>0) {

offset = document.cookie.indexOf(search);

if(offset !=-1){

offset+= search.length;

end = document.cookie.indexOf(";",offset);

if(end ==-1) end = document.cookie.length;

returnvalue = unescape(document.cookie.substring(offset,end));

}

return returnvalue;

}

function LoadPop(){

if(GetCookie("pop")=="")

{

openWindow();

var today = new Date()

var time="Sunday,1-jan-"+today.getYear()+1+" 23:59:59 GMC";

document.cookie="pop=yes;expires="+time;

}

</Script>

（3）在需要弹出广告窗口页面的 onLoad 事件中调用弹出广告窗口的函数，程序代码如下。

技巧：当浏览者将弹出的窗口关闭之后，再次进入该网站时，此窗口将不会再出现。如果想让该窗口再次出现，可以选择“工具”→“Internet 选项”，在弹出的对话框中“常规”选项卡中选中“删除Cookies”复选框，单击“确定”按钮即可。

举一反三

根据本实例，读者可以：

开发游戏网站中的系统公告；

开发新闻资讯类网站中的最新公告；

开发大型门户类网站中的弹出广告。

实例007 为弹出的窗口加入关闭按钮

本实例是一个简化操作的程序

实例位置：光盘\mingrisoft\01\007

实例说明

使用Windows操作系统的用户都知道，单击IE窗口中的“关闭”按钮时，可以关闭窗口，但是这样有时并不是很直观。为了方便用户，可以在弹出的窗口中加入“关闭”按钮。运行本实例，单击“最新服务”超级链接，将弹出最新服务详细信息页面，如图 1.7 所示。在该图的右下角有一个“关闭”按钮，单击该按钮可以将当前窗口关闭。

图1.7 为弹出的窗口加入关闭按钮

技术要点

本实例主要应用window对象的close()方法实现。close()方法的语法如下。

window.close();

功能：window对象的close()方法用于自动关闭浏览器窗口。

注意：应用window对象的close()方法关闭弹出的窗口时，和单击IE标题栏中的“关闭”按钮是一样的，但是如果关闭IE的主窗口，系统就会弹出“是否关闭此窗口”的确认对话框，只有单击“是”按钮后才可以关闭IE主窗口。

实现过程

（1）创建提供“最新服务”超级链接的文件，注意该超级链接需要执行的操作应该是应用window.open( )方法打开新窗口，代码如下。

（2）在最新服务窗口中加入关闭按钮，关键代码如下。

举一反三

根据本实例，读者可以：

实现制作办公自动化系统中的添加员工信息页面；

实现打开新窗口显示新闻详细信息页面；

在弹出的网站公告窗口中加入关闭按钮。

实例008 关闭弹出窗口时刷新父窗口

本实例是一个人性化的程序

实例位置：光盘\mingrisoft\01\008

实例说明

关闭弹出窗口时刷新父窗口也可以说是关闭子窗口时自动刷新父窗口中的信息，即用户通过window对象的open()方法打开一个新窗口（子窗口），当用户在该窗口中进行关闭操作后，关闭子窗口的同时系统会自动刷新父窗口来实现实时更新页面。例如，运行本实例，在会议记录中，单击页面中的“会议记录”超级链接，将弹出会议记录页面，该页面通过单击“关闭”按钮将自动关闭，同时系统会自动刷新父窗口，如图1.8所示。

图1.8 关闭弹出窗口时刷新父窗口

技术要点

本实例主要应用window.open()语句打开新窗口，并在新窗口中应用opener属性，该属性返回一个引用，用于指定打开本窗口的窗口对象。

语法：

window.opener

window.opener.方法

window.opener.属性

功能：返回的是一个窗口对象。opener属性与打开该窗口的父窗口相联系，当访问子窗口中opener属性时，返回的是父窗口，通过该属性，可以使用父窗口对象中的方法和属性。

注意：如果窗口不是由其他窗口打开的，在Netscape中这个属性返回null，在IE中返回“未定义”（undefined）。undefined在一定程度上等于null。需要说明的是：undefined不是JavaScript常数，如果读者企图使用undefined，那就真的返回“未定义”了。

reload()方法相当单击浏览器上的“刷新”（IE浏览器）按钮或“Reload”（Netscape浏览器）按钮。

实现过程

（1）制作用于显示会议信息列表的会议管理页面，在该页面中加入空的超级链接，并在其单击事件中加入JavaScript脚本，实现打开一个指定大小的新窗口，代码如下。

<a href="#"

onClick="Javascript:window.open('new.htm','','width=400,height=220')">

会议记录</a>

（2）制作会议记录详细信息页面，在该页面中通过“关闭”按钮的 onClick 事件调用自定义函数Mycheck()，从而实现关闭弹出窗口时刷新父窗口，代码如下。

function Mycheck()

{

alert("关闭子窗口！");

window.opener.location.reload();

//刷新父窗口中的网页

window.close();

//关闭当前窗窗口

}

</script>

举一反三

根据本实例，读者可以开发：

办公自动化系统中，打开新的页面添加员工信息后，关闭该页面时需要刷新父窗口；

在电子商务网站中后台管理添加商品信息、修改商品信息和删除商品信息时，都需要刷新父窗口。

实例009 关闭IE主窗口时，不弹出询问对话框

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\01\009

实例说明

通常情况下，当使用JavaScript的window.close()语句关闭IE主窗口时，都会弹出一个“你查看的网页正在试图关闭窗口。是否关闭此窗口？”的询问对话框。在制作网络应用程序时，这种情况是我们不想看到的，那么如何才能屏蔽该对话框呢？本实例将介绍解决该问题的方法。运行本实例，如图 1.9所示，单击“关闭系统”超级链接后，该 IE窗口将被直接关闭。

图1.9 关闭IE主窗口时，不弹出询问对话框

技术要点

本实例主要应用 JavaScript的 window对象的 opener属性将要关闭的 IE窗口的打开窗口设臵为 null，然后再通过 window 对象的 close( )方法将该窗口关闭，这样就不会弹出询问对话框了。

实现过程

在实例首页中，添加一个用于关闭窗口的超级链接，在该超级链接的 onClick 事件中添加控制窗口关闭的代码，具体代码如下。

举一反三

根据本实例，读者可以：

开发进销存管理系统中的退出系统；

开发办公自动化管理系统中的关闭系统；

开发宽带影院中的打开全屏显示的主窗口。

1.2 弹出网页对话框

这里所说的网页对话框是指通过指定的脚本代码打开一个新的窗口，并且该窗口可以有返回值，网页对话框可以分为网页模式对话框和网页非模式对话。下面将通过具体实例介绍网页对话框的应用。

实例010 弹出网页模式对话框

本实例是一个提高网站安全性的程序

实例位置：光盘\mingrisoft\01\010

实例说明

在开发程序网站时，有时需要弹出网页模式对话框。例如本实例将弹出一个指定大小的网页模式对话框。运行结果如图1.10所示。

图1.10 弹出网页模式对话框

技术要点

本实例主要应用window对象的showModalDialog( )方法，该方法用于弹出网页（模式）对话框，其语法格式如下。

variant = object.showModalDialog(sURL [, vArguments [, sFeatures]])

参数说明如下。

● sURL：指定URL 文件地址。

● vArguments：用于向网页对话框传递参数，传递参数的类型不限制，对于字符串类型，最大为4096个字符，但也可以传递对象，例如index.htm。

● sFeatures：可选项，窗口对话框的设臵参数，主要参数如表1.4 所示。

表1.4 参数说明

实现过程

（1）制作外出登记的页面，在该页面中添加相应的表单或表单元素，在“登记”图片按钮的onClick事件中调用自定义JavaScript函数opendialog()，代码如下。

（2）编写自定义JavaScript函数opendialog()，用于打开网页对话框，代码如下。

function opendialog()

{

var

someValue=window.showModalDialog("new.htm","","dialogWidth=640px;dialogHeight=423px;status=no;help=no;scrollbars=no")

}

</script>

（3）制作用于添加外出登记的页面 new.htm，通过该页面完成外出登记信息的添加。完整代码如下。

<body>

<tr>

<tr>

<tr>

</label></td>

</label></td></tr>

</table></td></tr>

<tr>

</label></td></tr>

<tr>

</label></td>

<tr>

</tr></table></td>

</tr>

</table>

</body>

举一反三

根据本实例，读者可以：

在编写人力资源管理系统时，为员工指定所属部门；

在编写校园管理系统时，弹出网页对话框选择班级或专业；

在客房预订系统中，弹出网页对话框选择客户信息。

实例011 弹出全屏显示的网页模式对话框

本实例是一个提高网站安全性的程序

实例位置：光盘\mingrisoft\01\011

实例说明

在设计网页时，对于一些只有指定用户才可以看到的信息，可以将其以全屏显示的网页（模式）对话框展示给用户，这样可以保证用户看后能及时将其关闭。例如，在明日科技编程词典网站中的“购买须知”就是只有登录用户才可以查看。用户登录后，“购买须知”超级链接方可使用，单击“购买须知”超级链接，即可进入如图1.11所示的“购买须知”页面，这时的“购买须知”页面是以全屏网页（模式）对话框形式进行显示的，用户只有关闭该页面后，才可以查看网站的其他内容。

图1.11 弹出全屏显示的网页模式对话框

技术要点

本实例主要应用screen对象的width、height属性和window对象的showModalDialog()方法实现，在实例010中已经介绍了window对象showModalDialog()方法，这里不再赘述。其实还有一种方法也可以打开网页对话框，即showModelessDialog()方法。

使用showModalDialog()与showModelessDialog()方法的区别在于，showModalDialog()打开的网页对话框为模式窗口，臵在父窗口上，必须关闭才能访问父窗口；而showModelessDialog()方法打开的对话框是无模式窗口，打开后不必关闭也可以访问父窗口或其他窗口。

实现过程

（1）创建提供“购买须知”超级链接的页面，在该页面中添加空的超级链接，在该超级链接的onClick事件中调用自定义JavaScript函数opendialog()。关键代码如下。

（2）编写自定义JavaScript函数opendialog()，用于打开全屏显示的网页对话框，程序代码如下。

function opendialog()

{

var width=screen.width;

var height=screen.height;

window.showModalDialog("new.htm","","dialogWidth="+width+"px;dialogHeight="+height+"px;status=no;help=no;scrollbars=no")

}

</script>

（3）创建用于全屏显示的页面，在该页面中添加所要显示的信息。程序代码如下。

</tr>

<tr>

<td class="style2">一年两次升级</td>

</tr>

<tr>

<td class="style2">每月升级，每月赠送最新软件，编程锦囊。全年提供30项目源程序的有限服务支持。</td>

</tr>

<tr>

<td class="style2">每月升级，每月赠送最新软件，编程锦囊。全年提供60项目源程序的有限服务支持。</td>

</tr>

<tr>

<td class="style2">每月升级，每月赠送最新软件，编程锦囊。提供一年全程技术支持服务。</td>

</tr>

</table>

举一反三

根据本实例，读者可以：

实现弹出的网站后台管理员登录窗口；

实现当用户执行非法操作后，弹出一个大大的警告框。

实例012 网页拾色器

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\01\012

实例说明

在动态网站中，经常会用到要求用户可以在客户端应用自定义颜色来显示某些信息的情况，如留言文字的颜色。这可以在网页中加入一个网页拾色器实现。运行本实例，单击页面中的颜色块，将打开网页拾色器，如图1.12所示。当鼠标光标移动到指定色块时，将显示该色块的颜色值；当用户单击指定色块时，就会关闭该网页对话框，并将选择的颜色设臵为颜色块的背景色。

图1.12 网页拾色器

技术要点

在本实例中仅使用216种浏览器安全的颜色，即所谓Netscape色块。这216种颜色分别代表0、51、102、153和204这5个颜色值以及每一种原色（即红、绿、蓝）。这些十进制数值对应的十六进制数分别为：0x00、0x33、0x66、0x99、0xCC和0xFF。在HTML的颜色属性中，黑色是#000000，纯红色是#FF0000，纯绿色就是#00FF00，纯蓝色是#0000FF，而白色是#FFFFFF。在实现网页拾色器时，需要应用JavaScript的数组。创建数组可以有以下3种方法。

（1）无参数调用。语法格式如下。

var h = new Array();

（2）指定数组前n个元素的值。语法格式如下。

var h = new Array(arglist);

其中，参数arglist是一个用逗号隔开的值表，这些值用于给Variant所包含的数组的各元素赋值。如果不提供参数，则创建一个长度为0的数组。

（3）指定具有的元素个数。语法格式如下。

var h = new Array(n);

其中，参数n是指定数组的长度。在JavaScript中，数组的第一个元素的下标值为0，所以n的值为数组的最大下标值加1。

注意：没有作为数组声明的Variant也可以表示数组。除了长度固定的字符串以及用户定义类型之外，Variant 变量可以表示任何类型的数组。尽管一个包含数组 Variant 和一个元素为Variant类型的数组在概念上有所不同，但对数组元素的访问方式是相同的。

实现过程

（1）创建需要调用网页拾色器的页面，在该页面中添加一个文本框，将文本框设臵为只读，同时将文本框的背景颜色设臵为黑色，并在该文本框的onClick事件中调用自定义的JavaScript函数colorpick()，代码如下。

（2）编写自定义的JavaScript函数colorpick()，用于打开网页对话框调用网页拾色器，并用网页拾色器的返回值设臵文本框的背景颜色，代码如下。

function colorpick(field)

{

var rtn = window.showModalDialog("color.htm","","dialogWidth:220px;dialogHeight:200px;status:no;help:no;scrolling=no;

scrollbars=no");

if(rtn!=null)

field.style.background=rtn;

return;

}

</script>

（3）制作网页拾色器页面color.htm。关键代码如下。

var h = new Array(6)

h[0] = "FF";

h[1] = "CC";

h[2] = "99";

h[3] = "66";

h[4] = "33";

h[5] = "00";

function action(RGB)

{

parent.window.returnValue="#"+RGB;

window.close();

}

function Mcell(R, G, B)

{

document.write('<td bgcolor="#'+R+G+B+'">');

document.write('<a href="#" onClick="action(\''+(R+G+B)+'\')">');

document.write('<img border=0 height=12 width=12 \')" alt=\'#'+R+G+B+'\'>');

document.write('</a>');

document.write('</td>');

}

function Mtr(R, B)

{

document.write('<tr>');

for (var i = 0; i < 6;++i)

{

Mcell(R, h[i], B);

}

document.write('</tr>')

}

function Mtable(B)

{

document.write('<table cellpadding=0 cellspacing=0 border=0>');

for (var i = 0; i < 6;++i) {

Mtr(h[i], B);

}

document.write('</table>');

}

function Mcube() {

document.write('<table cellpadding=0 cellspacing=0 border=0><tr>');//

for (var i = 0; i < 6;++i)

{

if(i%3==0){

document.write('<tr>');

}

document.write('<td bgcolor="#FFFFFF">');

Mtable(h[i])

document.write('</td>');

}

if(i%3==0){

document.write('</tr>');

}

document.write('</tr></table>');

}

Mcube()

</script>

举一反三

根据本实例，读者可以：

实现具有UBB功能的在线论坛；

实现网站聊天室；

实现网页换肤。

实例013 日期选择器

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\01\013

实例说明

在动态网站的人机交互页面中，经常会用到要求用户输入日期的情况，如果让用户手动输入，不但操作不方便，而且日期格式不好控制。为了解决此问题，可以在页面中加入日期选择器。运行本实例，单击“日期时间图片”超级链接，将弹出具有日期选择功能的网页对话框，如图1.13所示。当用户单击需要的日期后，日期选择网页对话框将自动关闭，并将选择结果填入“请假时间”文本框中。

图1.13 日期选择器

技术要点

本实例主要应用window 对象的showModalDialog( )方法实现，关于showModalDialog( )方法的详细介绍请读者参见实例010。

实现过程

（1）创建需要调用日期选择器的页面，在该页面中添加一个标识日期时间的图片，在该图片的onClick事件中调用自定义的JavaScript函数loadCalendar()，代码如下。

（2）编写自定义的JavaScript函数loadCalendar()，用于打开网页对话框调用日期选择器，代码如下。

function loadCalendar(field)

{

var rtn = window.showModalDialog("calendar.htm","","dialogWidth:280px;dialogHeight:250px;status:no;help:no;scrolling=

no;scrollbars=no");

if(rtn!=null)

field.value=rtn;

return;

}

</script>

（3）制作日期选择器页面calendar.htm。首先，添加两个下拉列表，用于选择要显示的年份和月份，然后制作一个7行7列的表格，其中最顶行用于标记星期，其他行显示日期。关键代码如下。

<tr>

<tr>

<td align="center"><input type="text" size="2" name="dayBox" readOnly onClick="javascript:CheckDate(this.value);"

onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"></td></tr>

</table></td></tr></table></form></center></body>

（4）最后，编写实现日期选择功能的JavaScript代码，程序代码如下。

var monthNames = new Array ( "", "1","2","3","4","5","6","7", "8", "9", "10", "11", "12" );

var endDay = new Array ( 0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 );

var dayNow = 0;

var monthNow = 0;

var yearNow = 0;

function load ( form )

{

set_month_year_now ();

var found= false;

for ( varmonth=0;month<form.monthList.length;month++)

if ( form.monthList[month].text==monthNames[monthNow] ){

form.monthList[month].selected= true;

found= true;}

if ( !found){error ();

return;}

var found= false;

for ( var year=0;year<form.yearList.length;year++)

if ( form.yearList[year].text==yearNow ) {

form.yearList[year].selected= true;

found= true;}

if ( !found){

error ();

return;}

display_month ( form );}

functionpreceding_month ( form ) {

varmonth_selected= form.monthList.selectedIndex;

var year_selected= form.yearList.selectedIndex;

if ( !month_selected&& !year_selected )　{error ();

return;}

if (month_selected>0 )

month_selected--;

else {

month_selected=11;

year_selected--;}

form.monthList[month_selected].selected= true;

form.yearList[year_selected].selected= true;

display_month ( form );}

function following_month ( form ) {

varmonth_selected= form.monthList.selectedIndex;

var year_selected= form.yearList.selectedIndex;

if (month_selected>= ( form.monthList.length-1 )&& year_selected>= ( form.yearList.length-1 ) ) {error ();

return;}

if (month_selected<11 )

month_selected++;

else {

month_selected=0;

year_selected++;}

form.monthList[month_selected].selected= true;

form.yearList[year_selected].selected= true;

display_month ( form );}

function set_month_year_now ()　{

var form=document.calendar;

var now=newDate ();

monthNow=now.getMonth ()+1;

yearNow= now.getYear ();

dayNow= now.getDate();

yearNow= ( yearNow<100 ) ?yearNow+1900 :yearNow;

var count=0

for (var i= yearNow-103; i<yearNow+50; i++) {

eval("form.yearList.options[count]=newOption('"+i+"',　'"+i+"')");

count++;}

form.yearList.selectedIndex=103;

form.yearList.length= count;}

function error ()　{

alert ( "超出范围!" );}

functiondisplay_month ( form ) {

varmonth= form.monthList.selectedIndex+1;

var year=parseInt ( form.yearList.options[ form.yearList.selectedIndex].text );

var start_day= start_day_in_month ( year,month );

var count=0;

for ( var row=0; row<6; row++) {

for ( var col=0; col<7; col++){

if ( row==0&& col< ( start_day-1 ) )

var day= "";

else if ( count < endDay[month] )

day =++count;

else

day = "";

form.dayBox[(row*7)+col].style.display = "";

form.dayBox[(row*7)+col].style.color = "black";

if (day == "") {

form.dayBox[(row*7)+col].style.display = "none";

} else {

form.dayBox[(row*7)+col].value = day;

if (col%7 == 0) form.dayBox[(row*7)+col].style.color = "red";

if (yearNow == year && monthNow == month && dayNow == day) form.dayBox[(row*7)+col].style.color = "blue";;}

}

function start_day_in_month ( year, month )

{

var day, daynum, ndays, mnum;

sday = start_day_in_year ( year );

endDay[2] = ( year %4 ) ? 28 : 29;

if ( month == 1 )

daynum = sday;

else {

ndays = sday;

for ( mnum=2; mnum<month+1; mnum++)

ndays = ndays+endDay[mnum-1];

daynum = ndays %7;}

daynum = (!daynum) ? 7 : daynum;

return (daynum);}

function start_day_in_year ( year )

{

var y, m, d;

var n;

y = year-1; m = 13; d = 1;

n = d+2 * m+( Math.floor ( ( 0.6+(m+1) ) )+y );

n = n+Math.floor ( ((y/4)-Math.floor ( (y/100 ) )+Math.floor ( ( y/400 ) ) ))+2 ;

n = Math.floor ( ( (n/7-Math.floor ( (n/7) ) ) * 7+0.5 ) );

return (n+1);}

function CheckDate(strDay)

{

var docFrm = document.calendar;

var choice_daynum = 0;

var current_daynum = 0;

var day_temp;

if (strDay != "")

{

var strY = docFrm.yearList.value;

var strM = docFrm.monthList.value;

var curr_y = new String(yearNow);

var curr_m = new String(monthNow);

var curr_d = new String(dayNow);

if (curr_m.length == 1) curr_m = "0"+curr_m;

if (curr_d.length == 1) curr_d = "0"+curr_d;

current_daynum = new Number(curr_y+curr_m+curr_d) ;

if (strM.length == 1) strM = "0"+strM;

if (strDay.length == 1) strDay = "0"+strDay;

choice_daynum = new Number(strY+strM+strDay);

parent.window.returnValue= strY+"-"+strM+"-"+strDay;　//将选择的日期传递到父窗口中

parent.window.close();

}

return false;}

</script>

举一反三

根据本实例，读者可以：

开发电子商务管理系统中的订单查询模块；

开发企业进销存管理系统中的数据查询模块；

开发用户注册模块中的生日选择功能。

1.3 窗口的动画效果

在浏览网页时，许多窗口在打开时，都显示了各种各样的动画效果，这样可以在浏览页面时，给人一种动态、新颖的效果。下面将通过几个典型实例进行详细讲解。

实例014 页面自动滚动

本实例可以方便操作、提高工作效率

实例位置：光盘\mingrisoft\01\014

实例说明

本实例实现在打开页面，当页面出现纵向滚动条时，页面中的内容将从上向下进行滚动，当滚动到页面最底端时停止。运行结果如图1.14所示。

图1.14 页面自动滚动

技术要点

本实例主要用window对象的scroll()方法指定窗口的当前位臵。下面对scroll()方法进行详细说明。

scroll()方法的语法格式：

scroll(x,y);

参数说明如下。

● x：屏幕的横向坐标。

● y：屏幕的纵向坐标。

功能：指定窗口滚动坐标的位臵。

实现过程

编写用于实现页面自动滚动的JavaScript代码，代码如下。

var position = 0;

function scroller(){

if (true){

position++;

scroll(0,position);

clearTimeout(timer);

var timer = setTimeout("scroller()",10);

}

scroller();

</script>

举一反三

根据本实例，读者可以：

使页面中的文字上下循环滚动；

使页面中的文字左右循环滚动。

实例015 打开窗口特殊效果

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\01\015

实例说明

本实例在打开 index.htm 文件后，将弹出“打开窗口特殊效果”页面，在该页面中单击超级链接将打开“明日美食留言薄”页面，在屏幕的左上角会弹出一个窗口，并动态改变窗口的宽度和高度，当窗口的高度和屏幕的高度一致时，继续添加窗口的宽度，直到与屏幕大小相同为止。运行结果如图1.15、图1.16所示。

图1.15 打开窗口时的效果

图1.16 放大后的窗口效果

技术要点

本实例主要是用 window 对象的 open( )方法来打开一个已有的窗口，用 screen 对象的availHeight属性来获取屏幕可工作区域的高度，用moveTo()和resizeTo()方法来指定窗口的位臵及大小，并用resizeBy()方法使窗口逐渐变大，直到窗口大小与屏幕的工作区大小相同。下面对window对象的moveTo()、resizeTo()和resizeBy()方法分别进行介绍。

（1）moveTo()方法

moveTo()方法的语法格式：

window.moveTo(x,y)

参数说明如下。

● x：窗口左上角的x 坐标。

● y：窗口左上角的y坐标。

功能：将窗口移动到指定坐标(x,y)处。

（2）resizeTo()方法。

resizeTo()方法的语法格式：

window.resizeTo(x,y)

参数说明如下。

● x：窗口的水平宽度。

● y：窗口的垂直宽度。

功能：将当前窗口改变成(x,y)大小，x、y分别为宽度和高度。

（3）resizeBy()方法。

resizeBy()方法的语法格式：

window.resizeBy(x,y)

参数说明如下。

● x：放大或缩小的水平宽度。

● y：放大或缩小的垂直宽度。

功能：将当前窗口改变到指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小。

实现过程

（1）在页面中添加一个链接标记<a>，用于调用自定义函数go1()，代码如下。

<a href="javascript:go1()">打开明日美食留言薄</a>

（2）编写用于实现打开窗口特殊效果的JavaScript代码。

自定义函数go1()，用于打开指定的窗口，并设臵其位臵和大小，代码如下。

var winheight,winsize,x;

function go1(){

winheight=100;

winsize=100;

x=5;

win2=window.open("melody.htm","","scrollbars='no'");

win2.moveTo(0,0);

win2.resizeTo(100,100);

go2();

}

自定义函数go2()，用于动态改变窗口的大小，代码如下。

function go2()

{

if (winheight>=screen.availHeight-3)

x=0

win2.resizeBy(5,x)

winheight+=5

winsize+=5

if (winsize>=screen.width-5){

winheight=100

winsize=100

x=5

return

}

setTimeout("go2()",50)

}

</script>

举一反三

根据本实例，读者可以：

指定窗口显示的位置及大小；

用按钮动态改变窗口的大小。

实例016 动态显示窗口

这是一个可以启发思维的实例

实例位置：光盘\mingrisoft\01\016

实例说明

本实例实现在窗口打开时，将窗口设臵为最小的宽度，并使窗口的高度逐渐增加，当窗口的高度与屏幕的高度一致时，使窗口的宽度不断增加，直到与屏幕的宽度相一致。运行结果如图1.17、图1.18所示。

图1.17 窗口高度不断增加

图1.18 窗口变大后的效果

技术要点

本实例主要应用了screen对象的availWidth和availHeight属性来获得当前屏幕的宽度和高度，并用resizeTo()方法来自动增加窗口的高度和宽度。

resizeTo()方法已在实例015中进行详细讲解，这里不再赘述。

实现过程

（1）编写用于实现动态显示窗口的JavaScript代码。

function expandingWindow()

{

var heightspeed = 2;

var widthspeed = 7;

var leftdist = 0;

var topdist = 0;

var winwidth = window.screen.availWidth-leftdist;

var winheight = window.screen.availHeight-topdist;

for (sizeheight = 1; sizeheight < winheight; sizeheight+= heightspeed) {

self.resizeTo("1", sizeheight);

}

for (sizewidth = 1; sizewidth < winwidth; sizewidth+= widthspeed) {

self.resizeTo(sizewidth, sizeheight);

}

</script>

（2）在<body>标记的窗口载入（onload）事件中调用自定义函数expandingWindow()。代码如下：

举一反三

根据本实例，读者可以：

设置打开窗口的大小与屏幕大小相同；

使窗口出现下拉式打开效果。

实例017 慢慢放大的窗口

这是一个可以启发思维的实例

实例位置：光盘\mingrisoft\01\017

实例说明

本实例实现在窗口打开时，将窗口按照指定的大小放在屏幕的中间，并使窗口不断放大，直到窗口大小与屏幕大小相同为止。运行结果如图1.19、图1.20所示。

图1.19 窗口放大前的效果

图1.20 窗口慢慢放大的效果

技术要点

本实例主要应用screen对象的availWidth和availHeight属性来获得屏幕工作区域的宽度和高度，并用window对象的resizeTo( )方法来指定窗口的位臵，用window对象的moveTo( )方法使窗口不断变大。

window对象的resizeTo( )和moveTo( )方法的介绍可参见实例015 中的技术要点。

实现过程

（1）编写用于实现慢慢放大的窗口的JavaScript代码。

自定义变量，用于获取屏幕的大小，并将窗口放在屏幕指定的位臵。

var sun=400;

var screenW=window.screen.availWidth;

var screenH=window.screen.availHeight;

window.resizeTo((screenW-sun),(screenH-sun));

var initialW=screenW-sun;

var initialH=screenH-sun;

var x=((screenW)-initialW)/2;

var y=((screenH)-initialH)/2;

window.moveTo(x,y);

var timer;

自定义函数blow()，用于使窗口在屏幕中逐渐变大。

function blow(){

if (initialH<(window.screen.height-30)){

initialW=initialW+2;

initialH=initialH+2;

window.resizeTo(initialW,initialH);

timer=setTimeout("blow()",50);

x=x-1;

y=y-1;

window.moveTo(x,y);

}

else{window.clearTimeout(timer)}

}

</script>

（2）在<body>标记的窗口载入（onload）事件中调用自定义函数blow()，代码如下。

举一反三

根据本实例，读者可以：

将窗口慢慢缩小；

使窗口在右下角慢慢放大。

实例018 下降式浏览器

本实例是一个定义窗口的程序

实例位置：光盘\mingrisoft\01\018

实例说明

本实例是在窗口打开时，将整个窗口放在屏幕的最上面，使窗口无法在屏幕中进行显示，然后动态地使窗口进行下移，直到窗口显示在屏幕的左上角为止。运行结果如图1.21所示。

图1.21 下降式浏览器

技术要点

本实例主要应用了 screen 对象的 availHesht 属性来获得当前屏幕工作区的高度，并用window对象的moveBy()方法使窗口自动下移。下面对window对象的moveBy()方法进行详细介绍。

moveBy()方法的语法格式：

window.moveBy(x,y)

参数说明如下。

● x：水平位移量。

● y：垂直位移量。

功能：按照指定位移量设臵窗口的大小。

实现过程

（1）编写用于实现下降式浏览器的JavaScript代码。

function drop() {

var heig=window.screen.availHeight;

if(self.moveBy){

self.moveBy (0,-heig);

for(i = Math.floor(heig/3); i > 0; i--){

self.moveBy(0,3);

}

</script>

（2）在<body>标记的窗口载入（onload）事件中调用自定义函数drop()。

举一反三

根据本实例，读者可以：

制作一个从左页慢慢移出的浏览器；

制作一个飞出的浏览器。

实例019 旋转的窗口

这是一个可以启发思维的实例

实例位置：光盘\mingrisoft\01\019

实例说明

本实例是在窗口打开时，将窗口的左上角的位臵以圆形的轨迹进行移动，使窗口产生旋转的效果。运行结果如图1.22所示。

图1.22 旋转的窗口

技术要点

本实例主要使用公式 r*Math.cos((i*Math.PI)/180)和 r*Math.sin((i*Math.PI)/180)来计算出圆形轨迹，其中，r表示圆的半径，i表示圆周（在这里i的值为0～360，通过i值可以计算出圆各个点的位臵），然后使用window对象的moveTo()方法使窗口进行旋转。

moveTo()方法的介绍可参见实例015中的技术要点。

实现过程

编写用于实现旋转窗口的JavaScript代码。

var a=275;

var b=275;

var pp;

var r=60;

var x=y=0;

window.resizeTo(200,200);

function eddy(i){

var ob=document.all("tt");

x = r*Math.cos((i*Math.PI)/180)+a;

y = r*Math.sin((i*Math.PI)/180)+b;

window.moveTo(x,y);

i=i+1;

if (r>100){window.clearTimeout(pp);}

else{

if (i>360){i=0; }

pp=setTimeout("eddy("+i+")",10);

}

eddy(0);

</script>

举一反三

根据本实例，读者可以：

使窗口以不规则的状态进行移动；

使窗口以阶梯状进行向下移动。

实例020 移动的窗口

这是一个可以提高分析能力的实例

实例位置：光盘\mingrisoft\01\020

实例说明

本实例实现在窗口打开时，将窗口放在屏幕的左上角，并将窗口从左到右以随机的角度进行移动，当窗口的外边框碰到屏幕四边时，窗口将进行反弹。运行结果如图1.23、图1.24所示。

图1.23 窗口移动前的效果

图1.24 窗口移动后的效果

技术要点

本实例的主要思想是用screen对象的availWidth和availHeight属性来获得当前屏幕的宽度和高度，然后判断窗口的4个边是否碰到屏幕的4个边界，如果碰到，则进行反弹。

resizeTo()和moveTo()方法的介绍可参见实例015。

实现过程

编写用于实现移动窗口的JavaScript代码。

window.resizeTo(300,300)

window.moveTo(0,0)

inter=setInterval("go()", 1);

var aa=0

var bb=0

var a=0

var b=0

function go()

{

try{

if (aa==0)

a=a+2;

if (a>screen.availWidth-300)

aa=1;

if (aa==1)

a=a-2;

if (a==0)

aa=0;

if (bb==0)

b=b+2;

if (b>screen.availHeight-300)

bb=1;

if (bb==1)

b=b-2;

if (b==0)

bb=0;

window.moveTo(a,b);

}

catch(e){}

}

</script>

举一反三

根据本实例，读者可以：

使窗口在屏幕中随意走动；

使窗口出现下拉式打开效果。

实例021 震动的窗口

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\01\021

实例说明

本实例实现的是窗口震动的效果，在窗口中可以单击“左右震动”、“上下震动”和“整屏震动”3个按钮，使窗口有3种不同的震动效果。运行结果如图1.25所示。

图1.25 震动的窗口

技术要点

实现本实例主要使用了window对象的moveBy( )方法，该方法的详细介绍可参见实例018中的技术要点。

实现过程

（1）在页面中添加3个按钮，并调用各自的单击事件，代码如下。

<input name="button3" type="button" id="button3" value="整屏震动" onclick

="flap_xy(5)">

（2）编写用于实现震动窗口的JavaScript代码。

自定义函数flap_xy()，用于实现窗口的整屏震动，具体代码如下。

function flap_xy(n)

{

if (self.moveBy){

for (i = 10; i > 0; i--){

for (j = n; j > 0; j--){

self.moveBy(0,i);

self.moveBy(i,0);

self.moveBy(0,-i);

self.moveBy(-i,0);

}

自定义函数flap_x()，用于实现窗口的左右震动，具体代码如下。

function flap_x(n){

if (self.moveBy){

for (i = 10; i > 0; i--){

for (j = n; j > 0; j--){

self.moveBy(i,0);

self.moveBy(-i,0);

}

自定义函数flap_y()，用于实现窗口的上下震动，具体代码如下。

function flap_y(n){

if (self.moveBy){

for (i = 10; i > 0; i--){

for (j = n; j > 0; j--){

self.moveBy(0,i);

self.moveBy(0,-i);

}

</SCRIPT>

举一反三

根据本实例，读者可以：

使窗口按一定的轨迹进行移动。

实例022 弹出广告窗口

本实例可以美化界面

实例位置：光盘\mingrisoft\01\022

实例说明

在浏览网页时，当打开一个特定的网页时，会在屏幕的右下角慢慢浮出一个广告窗口，这样可以起到一个宣传的作用，本实例通过打开一个主页面，在屏幕的右下角自动以上移的方式弹出一个广告窗口。运行结果如图1.26所示。

图1.26 弹出广告窗口

技术要点

本实例主要实现在主页面打开时，用 window 对象的 open()方法调用子窗口，并设臵子窗口的大小与位臵，再打开子窗口后，用window对象的moveTo()方法将子窗口逐渐上移。

moveTo ()方法的介绍可参见实例015。

实现过程

（1）主窗口的相关代码。

编写用于实现调用广告窗口的JavaScript代码。

var newformW=180;

var newformH=130;

self.focus();

function pp()

{

var T=window.screen.width-newformW;

var L=window.screen.height+newformH;

var name=window.open("ad.htm","","width="+newformW+",height="+newformH

+",top="+T+",left="+L);

}

pp();

</script>

（2）广告窗口的相关代码。

编写用于实现广告窗口从右下角上移的JavaScript代码。

var W=document.body.clientWidth;

var H=document.body.clientHeight;

var L=window.screen.width-W;

var T=window.screen.height;

self.moveTo(L,T);

function drop(n) {

if (n>(T-H-60)){

self.moveTo(L-12,--n);

var tim=setTimeout("drop("+n+")",1);

}

else{clearTimeout(tim)}

}

drop(T);

</script>

举一反三

根据本实例，读者可以：

关闭窗口时，弹出广告；

关闭广告窗口时，使主窗口显示其他网页。

1.4 窗口控制

在制作网站时，对窗口的控制是十分重要的，例如可以根据屏幕分辨率的大小来控制页面的大小，也可以根据需要将页面进行最大化显示或对页面的大小进行控制。下面将通过几个典型实例进行详细讲解。

实例023 窗口始终在最上面

本实例可以方便操作、提高工作效率

实例位置：光盘\mingrisoft\01\023

实例说明

浏览网页时，经常会看到一些广告总是浮动于所有窗口的最上面，这样使浏览者不得不观看广告中的内容。本实例将指定一个页面总在窗口的最上面。运行结果如图1.27所示。

图1.27 窗口始终在最上面

技术要点

本实例主要应用了document对象的focus()方法来获得窗口的焦点。用window对象的open()方法所创建的窗口进行操作，将其返回值（窗口对象）赋给一个变量，然后用该变量对创建的窗口进行操作。下面对window对象的open()方法进行详细介绍。

window对象open()方法的语法格式：

WindowVar=window.open(url,windowname[,location]);

参数说明如下。

● URL：用于打开一个新的浏览器窗口，并在新窗口中装入一个指定的URL 地址。

● windowname：打开一个新的浏览器窗口时，指定窗口的名称。

● location：对窗口属性进行设臵，其可选参数如表1.5 所示。

表1.5 location参数的取值

续表

功能：打开一个新的窗口，并在窗口中装载指定URL地址的网页。

实现过程

（1）在页面中添加一个按钮，用于显示窗口，代码如下。

（2）编写用于实现选中表格中单元格的JavaScript代码。

自定义函数newform()，用于创建一个窗口，具体代码如下。

var name;

function newform()

{

name=window.open("","","width=300,height=200");

name.document.write('<input name="imageField" type="image" src="6.jpg"

width="280" height="180" border="0">');

show(name);

}

自定义函数show()，使窗口不断获得焦点，使其在最上面，具体代码如下。

function show(name){

try{

name.document.focus();

setTimeout("show(name)",1);

}

catch(e){}

}

</script>

举一反三

根据本实例，读者可以：

实现用window对象的open( )方法调用其他的窗口；

指定新窗口的大小及位置。

实例024 窗口的最小化、最大化

本实例是一个提高规范化的实例

实例位置：光盘\mingrisoft\01\024

实例说明

在浏览网页时，有些网页会自动对窗口的显示状况进行调试。本实例是通过页面中的“最小化”和“最大化”按钮控制窗口的最小化和最大化。运行结果如图1.28所示。

图1.28 窗口的最大化、最小化

技术要点

本实例主要应用到了<object>标记和<param>标记。<object>标记里的classid属性是告诉浏览器插件的类型。用<object>标记在页面中插入Activex控件或其他对象之后，有时候需要向该对象或者控件传递参数，这就要使用<param>标记。该标记没有相应的结束标志</param>，下面对<param>标记进行详细说明。

<param>标记的一般格式为：

参数说明如下。

● name：是参数的名字。

● value：指定参数的值。

● valuetype：指定怎样表示参数的值。

● type：指定媒体类型。

实现过程

（1）在页面中添加两个按钮和一个层，代码如下。

（2）编写用于实现窗口最大化、最小化的JavaScript代码，具体代码如下。

var s="";

s=s+'<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">';

s=s+'<param name="Command" value="Minimize"></object>';

s=s+'<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">';

s=s+'<param name="Command" value="Maximize"></object>';

aa.innerHTML=s;

</script>

举一反三

根据本实例，读者可以：

使窗口最大化后，最大化按钮显示还原。

实例025 频道方式窗口

本实例可以方便操作、提高工作效率

实例位置：光盘\mingrisoft\01\025

实例说明

在浏览网页时，经常会看到一些网页以频道的方式进行打开。本实例在打开“index.htm”文件后，将弹出“频道方式窗口”页面，在该页面中单击“频道方式窗口”按钮，将以频道方式打开“明日美食留言薄”页面。运行结果如图1.29所示。

图1.29 频道方式窗口

技术要点

本实例主要应用 window 对象的 open( )方法中的 channelmode 参数值来使创建窗口以频道方式进行显示。

window对象open( )方法中参数的详细说明可参见实例023。

实现过程

（1）在页面中添加一个按钮，代码如下。

</form>

（2）编写用于实现频道方式窗口的JavaScript代码。

function show(){

window.open("trans.htm","","channelmode,scrollbars");

}

</script>

举一反三

根据本实例，读者可以：

去掉窗口的状态栏；

去掉窗口中的工具栏。

实例026 全屏显示

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\01\026

实例说明

在制作网站时，有时根据网页内容的需要，要将网页进行全屏显示。本实例在打开页面后，单击页面中的“全屏显示”按钮，将页面进行全屏显示。运行结果如图1.30、图1.31所示。

图1.30 窗口打开时的效果

图1.31 窗口全屏显示效果

技术要点

本实例主要应用window对象的open( )方法中的fullscreen 参数，将当前窗口重新创建，并进行全屏显示。这样做可以避免在打开其他窗口时，也使其全屏显示。

另外，本实例还使用了document对象的location属性，该属性用于指定当前窗口。

实现过程

（1）在页面中添加两个按钮，将其放臵在层中，并用层的align属性的center值使按钮居中于页面，代码如下。

<input name="button1" type="button" id="button1" onClick="fullscreen()"

value="全屏显示">

<input name="button2" type="button" id="button2" value="关闭窗口" onClick

="window.close()">

</div>

（2）编写用于实现全屏显示的JavaScript代码。

var pp;

function fullscreen(){

pp=window.open('Index.htm', '', 'fullscreen=yes');

}

</script>

举一反三

根据本实例，读者可以：

制作一个与F11（全屏）键相同的功能。

实例027 设置窗口大小和位置

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\01\027

实例说明

本实例实现在窗口中设臵要打开页面的高度和宽度，以及在当前屏幕中的位臵。运行结果如图1.32所示。

图1.32 设臵窗口大小和位臵

技术要点

本实例主要通过用户输入的值来动态改变 window 对象的 open( )方法中的一些参数值，从而实现动态设臵窗口的大小和位臵。

window对象的open( )方法的详细介绍可参见实例001。

实现过程

（1）在页面中添加相关的组件，用于输入要创建窗口的位臵及大小，代码如下。

<p>宽：

高：

</p>

<p>X：

Y：

</p>

<p>

</p>

</form>

（2）编写用于实现设臵窗口大小和位臵的JavaScript代码。

var ss="";

function place()

{

ss="width="+document.form1.text1.value+",height="+document.form1.text2.value

+",top="+document.form1.text3.value+",left="+document.form1.text4.value;

var newform=window.open("melody.htm","",ss);

}

</script>

举一反三

根据本实例，读者可以：

用window对象的open( )方法任意打开指定路径下的HTML文件。

实例028 刷新当前页

本实例可以方便操作、提高工作效率

实例位置：光盘\mingrisoft\01\028

实例说明

在浏览页面时，有很多窗口都有自带的刷新功能，本实例将实现对当前窗口的刷新操作，只要单击页面中的“刷新”按钮即可。运行结果如图1.33所示。

图1.33 刷新当前页

技术要点

本实例主要应用location对象的reload()方法，对当前页进行刷新。

注意：reload()方法不可以用在循环语句中。

实现过程

（1）在页面中添加一个按钮，并在单击事件中调用自定义函数ref()，代码如下。

</form>

（2）编写用于实现刷新当前页的JavaScript代码。

function ref()

{

window.location.reload();

}

</script>

举一反三

根据本实例，读者可以：

制作一个按时间对当前页进行刷新的页面。

实例029 自动最大化

本实例可以提高工作效率

实例位置：光盘\mingrisoft\01\029

实例说明

在打开 IE 浏览器时，IE 浏览器的大小是上一次关闭窗口的默认值，但有些窗口只能以最大化形式进行显示。本实例可以在显示窗口时，使其最大化显示，运行结果如图1.34所示。

图1.34 自动最大化

技术要点

本实例主要应用screen对象的availWidth和availHeight属性来获取屏幕工作区的宽度和高度，并用resizeTo( )方法将当前窗口的大小设为屏幕大小，再用moveTo( )方法将窗口放在屏幕的左上角。

self获取的是当前窗口的对象，也可以用this代表当前窗口的对象。

resizeTo()和moveTo()方法的介绍可参见实例015。

实现过程

编写用于实现自动最大化的JavaScript代码。

self.moveTo(0,0);

self.resizeTo(screen.availWidth,screen.availHeight);

</script>

举一反三

根据本实例，读者可以：

将指定大小的窗口放在屏幕的中间；

制作一个在屏幕中移动的窗口。

实例030 自定义导航控制面板

本实例是一个提高网站安全性的程序

实例位置：光盘\mingrisoft\01\030

实例说明

在开发网络程序时，有时需要创建一个自定义导航控制面板。通过该面板可以直接进行相关功能的操作。例如，本实例在电子商城网站中添加了一个自定义导航控制面板，通过该面板可以将当前打开的IE窗口关闭，并且在关闭窗口时，将给予相关提示信息；应用“刷新”按钮将完成对当前网页的刷新操作；单击“打印”按钮可以将当前指定的网页内容打印出来；单击网页中的“前进”和“后退”按钮可以实现不同页面间的切换显示。运行结果如图1.35所示。

图1.35 自定义导航控制面板

技术要点

本实例主要应用 history对象实现导航控制面板的功能。下面对 history对象进行介绍。该对象主要用来存储一个最近所访问网页的URL地址的列表。

history对象的属性或方法的语法格式如下。

[window.]history.property|method([parameters])

history对象的常用属性以及说明如表1.6所示。

表1.6 history对象的常用属性

history对象的常用方法以及说明如表1.7所示。

表1.7 history对象的常用方法

实现过程

（1）在需要自定义导航控制面板的页面中插入如下程序代码，即可实现所需要的相应功能，代码如下。

function goto()

{

if(window.history.length>0)

window.history.go(window.history.length-1);

}

</script>

</div>

</form>

（2）在单击超级链接所进入的页面后，插入以下程序代码，同时也可以实现相应功能，代码如下。

var i=1;

function goto()

{

while (true)

{

if ((window.history.length-i)==-1){

break;

}

else{i=i+1;}

}

if(window.history.length>0)

window.history.go(window.history.length-i);

}

</script>

</div>

</form>

举一反三

根据本实例，读者可以：

开发在线考试管理系统时，应用该技术；

开发在线美食网站时，应用该技术；

开发宽带点播网时，应用该技术。

实例031 根据用户分辨率自动调整窗口

本实例是一个提高网站安全性的程序

实例位置：光盘\mingrisoft\01\031

实例说明

在网页设计时，通常需要考虑页面的美观及网站的整体布局。在浏览网页时，给浏览者以清晰、整齐的感觉。有时可能会因为浏览者计算机分辨率的不同而影响页面的整体效果。本实例将根据不同计算机分辨率的大小来自动调整窗口。实例运行结果如图1.36所示。

图1.36 根据用户分辨率自动调整窗口

技术要点

本实例主要应用window对象的resizeTo()方法设臵窗口的大小。下面将对该方法进行详细介绍。

resizeTo()方法的语法格式：

window.resizeTo(x,y)

参数说明如下。

● x：窗口的水平宽度。

● y：窗口的垂直宽度。

● 功能：将当前窗口改变成(x,y)大小，x、y分别为宽度和高度。

实现过程

（1）应用JavaScript脚本创建size()函数，该函数主要用于自动调整窗口大小，代码如下。

function size()

{

window.resizeTo(screen.width-100,screen.height-100);

}

</script>

（2）应用onload()事件调用自定义函数size()，代码如下。

举一反三

根据本实例，读者可以：

开发宠物网站程序时，应用到此技术；

开发供求信息管理系统时，应用到此技术；

开发新闻网站时，应用到此技术；

开发网上论坛中的用户注册窗口及用户登录窗口时应用到此技术。

1.5 窗口的其他效果

在浏览网页时，窗口会以多种方式进行显示，例如，在打开窗口前进行提示、使窗口透明等。下面将通过几个典型实例进行详细讲解。

实例032 打开窗口时显示对话框

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\01\032

实例说明

在浏览一些网页时，经常会弹出一些询问式的对话框，问浏览者是否要打开网页。本实例将通过一个简单的语句来实现这一功能。运行结果如图1.37所示。

图1.37 打开窗口时显示对话框

技术要点

本实例主要应用了window对象的confirm()方法和close()方法。下面对这两个方法进行详细说明。

confirm()方法又被称为确认对话框，由两个按钮组成（在中文平台中一般显示为“确定”和“取消”，英文平台为“OK”和“Cancel”）。该方法最重要的是具有返回值，当单击“确定”（“OK”）按钮时，返回值为true；当单击“取消”（“Cancel”）按钮时，返回值为false。设计者可以通过该对话框的返回值来决定脚本如何操作。

close()方法用于关闭一个浏览器窗口。

实现过程

编写用于实现打开窗口时显示对话框的JavaScript代码。

if (confirm("欢迎进入明日科技网站!")==false) {

window.close();

}

</script>

举一反三

根据本实例，读者可以：

在打开网页时，显示对话框，是否打开一些其他相关网页；

在关闭子窗口时，显示对话框，是否关闭其父窗口。

实例033 使窗口背景透明

本实例可以提高工作效率

实例位置：光盘\mingrisoft\01\033

实例说明

在制作网站时，有些网站的部分内容可能与其他的网站相同，这样就可以将其他网站的内容直接放臵在该网站中。本实例是将一个页面以框架的形式放到另一个页面中，并将页面设为透明状态。运行结果如图1.38所示。

图1.38 使窗口背景透明

技术要点

本实例主要应用的是浮动框架标记<iframe>。用<iframe>标记可以将其他页中的内容显示在当前页面中。下面对<iframe>标记的相关属性进行说明。

表1.8 <iframe>标记的属性

实现过程

（1）在页面中添加3个文本框，并设臵相应的名称，代码如下。

<table valign="center" align="center" width="518" height="318" border="1"

cellpadding="0" cellspacing="0">

<tr>

</th>

</tr>

</table>

（2）编写用于实现动态制作表格的JavaScript代码。

div1.innerHTML='<IFRAME frameborder="0" scrolling="no" src="melody.htm" width=506

height=360 allowtransparency></iframe>';

</script>

举一反三

根据本实例，读者可以：

在页面中动态生成一个登录界面；

动态替换表格的内容。

实例034 立体窗口

这是一个可以启发思维的实例

实例位置：光盘\mingrisoft\01\034

实例说明

在浏览网页时，经常会看到带有特殊效果的页面，本实例将通过对窗口样式的设臵，使窗口具有立体效果。运行结果如图1.39所示。

图1.39 立体窗口

技术要点

本实例主要应用了<body>标记的style样式的borderWidth（边框的宽度）、borderColor（边框的颜色）和borderStyle（边框的样式）属性，对页面的边框进行设臵。下面对borderStyle属性值进行详细地介绍。

borderStyle属性（边框样式）值如表1.9所示。

表1.9 borderStyle属性值

续表

注意：在对页面边框的样式进行设置时，要将页面中最上面的两行代码删除。代码如下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

实现过程

编写用于实现立体窗口的JavaScript代码。

document.body.style.borderWidth=5;

document.body.style.borderColor="#CCCCFF";

document.body.style.borderStyle="groove";

</script>

举一反三

根据本实例，读者可以：

使页面边框以不同的颜色进行闪动；

使页面边框具有凸出效果。

实例035 动态标题栏

这是一个人性化的实例

实例位置：光盘\mingrisoft\01\035

实例说明

在浏览网页时，经常会看到一些IE浏览器中标题栏的信息不停地闪动或变换。本实例将在打开页面时，对标题栏里的文字进行不断的变换。运行结果如图1.40、图1.41所示。

图1.40 标题栏文字改变前的效果

图1.41 标题栏文字改变后的效果

技术要点

本实例主要用document对象的title属性来修改页面标题栏中的信息，并用window对象的setTimeout()方法对 title 属性中的信息以指定间隔时间进行修改。下面对 setTimeout()方法进行详细介绍。

setTimeout()方法的语法格式如下：

setTimeout（function,milliseconds）

参数说明如下。

● function：要调用的JavaScript 自定义函数名称。

● milliseconds：设臵超时时间（以毫秒为单位）。

功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。

注意：setTimeout()方法在超时时间后只调用一次函数，而 setInterval()方法是按一定时间重复调用指定的函数。

实现过程

编写用于实现动态标题栏的JavaScript代码。

var n=0;

function title(){

n++;

if (n==3) {n=1}

if (n==1) {document.title='☆★动态标题栏★☆'}

if (n==2) {document.title='★☆明日科技网站☆★'}

setTimeout("title()",350);

}

title();

</script>

举一反三

根据本实例，读者可以：

在打开网页时，动态修改标题栏中的信息。

实例036 固定大小的窗口

本实例可以美化界面

实例位置：光盘\mingrisoft\01\036

实例说明

在浏览网页时，经常会看到一些窗口根据页面的内容来固定窗口的大小。本实例在打开窗口后，窗口的大小将不允许用户修改。运行结果如图1.42所示。

图1.42 固定大小的窗口

技术要点

本实例实现了在打开窗口后通过 window 对象的 resizeTo()方法指定窗口的大小，再通过<body>标记的onresize事件（窗口缩放事件）在改变窗口大小的同时恢复其窗口的指定大小。

window对象的resizeTo( )方法的介绍可参见实例015 中的技术要点。

实现过程

编写用于实现固定大小的窗口的JavaScript代码。

function fastness(){

window.resizeTo(600,440);

}

document.body.onresize=fastness;

document.body.onload=fastness;

</script>

举一反三

根据本实例，读者可以：

实现弹出固定大小的广告窗口。

1.6 框架的应用

所谓框架就是网页的各部分为相互独立的网页，又由一个网页将这些分开的网页组成一个完整的网页，显示在浏览者的浏览器中，重复出现的内容被固定下来，每次浏览者发出对页面的请求时，只下载发生变化的框架页面，其他子页面保持不变。

使用框架可以将容器窗口划分为若干个子窗口，在每个子窗口中可以分别显示不同的网页。使用框架可以非常方便地完成导航工作。下面将通过具体实例详细介绍框架的应用。

实例037 框架集的嵌套

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\01\037

实例说明

在进行网络程序开发时，在网页中使用一个框架集是非常简单的。但如果要在同一个网页中应用更多的框架集时，应该怎样进行框架集的嵌套呢？本实例将解决这一问题。运行结果如图1.43所示。

图1.43 框架集的嵌套

技术要点

本实例主要介绍框架集的嵌套应用，下面将对框架集进行详细介绍。

框架集主要包含如何组织各个框架的信息，可以通过<frameset>标记来定义框架集。框架是按照行和列来组织的，可以使用<frameset>标记的下列属性对框架的结构进行设臵。

（1）左右分割窗口属性COLS。

在水平方向上将浏览器分割成多个窗口，这可以通过框架的左右分割窗口属性COLS实现。其语法格式如下：

<frame>

</frameset>

参数属性说明如下。

● value：用于指定各个框架的列宽，取值有3 种形式：像素、百分比（%）和相对尺寸（*）。

例如，通过框架将浏览器窗口划分为3列，其中，第1列占浏览器窗口宽度的20%，第2列为120像素，第3列为浏览器窗口剩余部分的框架，代码如下。

<frame>

</frameset>

技巧：如果将COLS属性设置为“*，*，*”，则表示将窗口划分成3个等宽的框架；如果将 COLS 属性设置为“*，2*，3*”，则表示左边的框架占窗口宽度的 1/6，中间的框架占窗口宽度的1/3，右边的框架占窗口宽度的1/2。

（2）上下分割窗口属性ROWS。

在垂直方向上将浏览器分割成多个窗口，这可以通过框架的上下分割窗口属性 ROWS 实现。其语法格式如下。

<frame>

</frameset>

参数说明如下。

● value：用于指定各个框架的行高，取值有3种形式：像素、百分比（%）和相对尺寸（*），设臵方法与COLS属性类似。例如，通过框架将浏览器窗口划分为3行，其中的第1行占浏览器窗口宽度的20%，第2行为120像素，第3行为浏览器窗口剩余部分的框架。代码如下。

<frame>

</frameset>

（3）框架边框显示属性FRAMEBORDER。

该属性用于指定框架周围是否显示边框，取值为1（显示边框，默认值）或0（不显示边框）。

（4）FRAMESPACING。

该属性用于指定框架之间的间隔，以像素为单位。如果不设臵该属性，则框架之间没有间隔。

（5）指定边框宽度属性BORDER。

该属性用于指定边框的宽度，只有FRAMEBORDER属性为1时才有效。

实现过程

在需要进行布局的页面中写入以下程序代码，将 src 属性值修改为需要链接的文件即可。代码如下。

<html>

<head>

<title>框架集的嵌套</title>

</head>

</frameset>

<body>

</body>

</html>

举一反三

根据本实例，读者可以：

开发在线论坛程序时，应用该技术；

开发新闻网站程序时，应用该技术；

开发办公自动化管理系统时，应用该技术。

实例038 在网页中应用浮动框架

本实例是一个提高网站安全性的程序

实例位置：光盘\mingrisoft\01\038

实例说明

在开发网络程序时，经常会应用框架，例如网络考试管理系统中就涉及到了浮动框架。通过浮动框架将网站中各部分独立的网页重新组成一个完整的网页，显示在浏览器中。运行本实例，如图1.44所示。网页的左侧是一个独立的网页，右侧也是一个独立的网页。

图1.44 在网页中应用浮动框架

技术要点

本例主要应用浮动框架将各部分独立的网页重新组成一个完整的网页，下面将对浮动框架进行详细介绍。

浮动框架<iframe>是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示子页面的内容。其语法格式如下。

</IFRAME >

下面是浮动框架属性的详细介绍。

1.浮动框架的文件路径属性SRC

语法：

参数说明如下。

● file_name：指明浮动框架文件的文件名或者其他超级链接的网址。

2.浮动框架的名称属性NAME

语法：

参数说明如下。

● frame_name：定义的浮动框架名称。

3.浮动框架的对齐属性ALIGN

语法：

参数说明如下。

● left：居左对齐。

● center：居中对齐。

● right：居右对齐。

4.浮动框架的宽度和高度属性WIDTH、HEIGHT

语法：

参数说明如下。

● WIDTH：浮动框架的宽度。

● HEIGHT：浮动框架的高度。

5.浮动框架滚动条显示属性SCROLLING

语法：

参数说明如下。

value有3个取值。

● YES：显示滚动条。

● NO：不显示滚动条。

● AUTO：根据窗口内容决定是否有滚动条。

6.浮动框架边框属性FRAMEBORDER

语法：

参数说明如下。

● value：值为yes 代表显示框架边框，值为no 代表隐藏框架边框。

7.浮动框架边缘的宽度和高度属性MARGINWIDTH、MARGINHEIGHT

语法：

参数说明如下。

● MARGINWIDTH：设定浮动框架左右边缘与边框的宽度。

● MARGINHEIGHT：设定浮动框架上下边缘与边框的高度。

实现过程

在需要重新组建的网页中写入浮动框架的程序代码，并将 src 属性值设为需要组建的网页文件。代码如下。

<tr>

<td height="100%"><iframe src="adm_Mainleft.htm" frameborder="0" width="100%" height="100%" name="mainl" align="middle" scrolling="auto">对不起，你的浏览器不支持框架！</iframe></td>

</td>

</tr>

</table>

</td></tr>

<tr>

</tr>

</table>

</td>

</td>

</td>

</tr>

</table>

举一反三

根据本实例，读者可以：

开发在线论坛程序时，应用到该技术；

开发网络游戏程序时，应用到该技术；

开发物流信息网时，应用到该技术。

实例039 创建空白框架

本实例可以提高工作效率

实例位置：光盘\mingrisoft\01\039

实例说明

在进行网络程序开发时常常需要应用框架，所谓框架就是网页的各部分为相互独立的网页，又由一个网页将这些分开的网页组成一个完整的网页，显示在浏览者的浏览器中，此时重复出现的内容将被固定下来。那么如何在一个网页中创建空白的框架呢？本实例将解决这一问题。实例运行结果如图1.45所示。

图1.45 创建空白框架

技术要点

本实例主要应用框架的src属性给框架写一个通用的HTML文档。下面将对Frame框架进行详细介绍。

使用Frame框架可以设臵框架的属性，包括框架的名称、框架是否包含滚动条以及在框架中显示的网页等。其语法格式如下。

下面对框架属性进行详细介绍。

1.框架文件的路径属性SRC

通过SRC属性来定义框架装载文件的路径。

语法：

参数说明如下。

● file_name：指明框架文件的文件名或者其他超级链接的网址。

2.框架的名称属性NAME

通过NAME属性定义框架的名称，所起的名称将应用于页面的链接和脚本描述。

语法：

3.框架边框显示属性FRAMEBORDER

可以设臵是否显示框架边框。框架边框的显示情况继承框架集边框属性的设定。

语法：

参数说明如下。

● value：值为yes 代表显示框架边框，值为no 代表隐藏框架边框。

4.框架滚动条显示属性SCROLLING

通过SCROLLING属性设臵是否在框架内显示滚动条。

语法：

参数说明如下。

value：有3个取值。

● YES：显示滚动条。

● NO：不显示滚动条。

● AUTO：根据窗口内容决定是否显示滚动条。

5.框架边缘的宽度和高度属性MARGINWIDTH、MARGINHEIGHT

通过设臵这两个属性可以调整框架页面内容与边框的距离。

语法：

参数说明如下。

● MARGINWIDTH：设定框架左右边缘与边框的宽度。

● MARGINHEIGHT：设定框架上下边缘与边框的高度。

6.框架尺寸调整属性NORESIZE

利用该属性可以控制框架的尺寸是否可以调整。

语法：

NORESIZE：禁止改变框架的尺寸。

7.不支持框架标记<NOFRAMES>

某些版本的浏览器是不支持框架结构的，如果遇到这种情况，就可以使用<NOFRAMES>和</NOFRAMES>标记再声明一对文件主体标记<BODY>和</BODY>，代表在无法接受框架结构时唯一显示的页面。

实现过程

在需要添加空白框架的页面中添加以下程序代码，即可完成空白框架的创建。代码如下：

<html>

<head>

<!--

function sun()

{

return "<html></html>";

}

//-->

</script>

<title>创建空白框架</title>

</head>

</frameset>

</html>

举一反三

根据本实例，读者可以：

开发在线论坛程序时，应用到该技术；

开发在线点播系统时，应用到该技术；

在开发宠物网站时，应用到该技术。

实例040 居中显示框架页

这是一个可以提高分析能力的实例

实例位置：光盘\mingrisoft\01\040

实例说明

在建设Web网站时不得不考虑的一个问题就是：如何让不同分辨率的用户都能看到网页的最佳效果。目前，虽然许多用户的浏览器的分辨率还是800×600的，但是也有一部分已经是1024×768的了，所以在设计页面时，经常要兼顾两者。那么就应该这样设计页面：将网页在800×600的分辨率下设计，然后将页面居中显示，这样的网页在1024×768下显示时，将不会给人很难看的感觉。

将页面设臵为居中显示对于用表格布局的页面来说很简单，只需设臵表格水平居中显示即可，但如果是框架页面就没有那么简单了，这就需要应用框架嵌套技术。例如，在明日科技网站的软件首页就是应用框架嵌套技术居中显示页面的，如图1.46所示。

图1.46 居中显示框架页

技术要点

本实例主要应用框架集实现框架页的居中显示，框架集的详细介绍请读者参见实例037。

实现过程

通过对框架集（<frameset>标记）的属性设臵，将指定的框架页进行居中显示，程序代码如下。

<html>

<head>

<title>居中显示框架页</title>

</head>

</frameset>

</frameset>

<body>

</body>

</noframes>

</html>

举一反三

根据本实例，读者可以：

在开发网络图书程序时，应用到此技术；

在开发聊天程序时，应用到此技术；

在开发公司软件网站时，应用到此技术。

1.7 无边框窗口

所谓无边框窗口是指不包括IE浏览器窗口所固有的标题栏及灰色窗口边框的窗口，无边框窗口在某些特定的网站中起着举足轻重的作用。下面将通过几个具体实例介绍如何实现无边框窗口。

实例041 全屏显示无边框有滚动条的窗口

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\01\041

实例说明

通常用户在IE浏览器中浏览网页时，浏览器窗口都是包括标题栏、菜单栏和状态栏等固定内容的。虽然通过IE主菜单可以将浏览器的菜单栏和状态栏隐藏，但是标题栏却不能隐藏，即使将网页全屏显示也不能将其去除。有时为了网站的整体效果或其他目的，不得不使用全屏显示的无边框有滚动条的窗口。例如，在皮皮宠物网站中，为了给用户更真实的感觉，就可以将整个网站的主页面设臵为全屏显示模式，如图1.47所示。从图1.47中可以看出作者还为用户设计了“退出”超级链接，可以方便浏览者随时离开宠物网站，这也是使用全屏显示时需要读者注意的，不然浏览者会因找不到出口而烦恼。

图1.47 全屏显示无边框有滚动条的窗口

技术要点

实现全屏显示无边框有滚动条窗口主要通过 window 对象的 open()方法实现。这就需要借助一个中转页实现，即当该中转页运行时调用 open()方法打开一个全屏显示的窗口，并关闭打开中转页的窗口，这就需要应用 window对象 close()方法关闭窗口，关闭窗口时不弹出确认对话框。

说明：使用window对象的open()方法中的“fullscreen=1”参数，可以将打开的新窗口全屏显示。

实现过程

（1）新建一个空的 HTML 页面，该页面中可以没有任何页面布局元素或内容，文件名为index.htm。在该页面中添加代码如下。

<!--

winClose();

function winClose()

{

window.opener=null;

window.close();

window.open("main.htm","","fullscreen=1");

}

-->

</script>

（2）创建main.htm文件，该文件才是网站的真正首页，前面的index.htm页面只是起到一个页面跳转的作用。该页面读者可根据实际情况设计，这里不再进行详细介绍。

举一反三

根据本实例，读者可以：

应用该方法制作全屏显示的网络考试页面，这样可以防止考生刷新屏幕；

制作图书馆管理系统的主界面；

开发游戏网站。

实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\01\042

实例说明

对于一个页面风格清新自然的网站来说，如果弹出的窗口带有不适合页面风格的灰色边框及死板的标题栏，那么这势必会影响网站的整体效果。本实例将向读者介绍一种更为完善的无边框窗口的实现方法，那就是应用 CSS+DIV 实现。运行本实例，单击“用户登录”超级链接即可弹出无边框的用户登录窗口，如图1.48所示。

图1.48 应用CSS+DIV实现指定尺寸无边框无滚动条窗口

技术要点

本实例主要通过在页面中加入DIV层，并在页面中控制层的位臵及其显示和隐藏来实现。在页面中加入层的语法如下：

„„

</DIV>

参数说明如下。

● ID：<div>标记的 ID 也可以说是它的名字，常和 CSS 样式结合，实现对网页中任何元素的控制。

● align：用于控制<div>标记中的元素的对齐方式，其value 值可以是left、center 和right，分别用于设臵元素的居左、居中和居右对齐。

● class：用于设臵<div>标记中的元素的样式，其value 值为CSS 样式中的class 选择符。

● style：用于设臵<div>标记中的元素的样式，其 value 值为 CSS 属性值，各属性值间应用分号分隔。该属性最常用的功能之一就是进行<div>标记的定位，其对应的属性为position，该属性有两个可选值：relative和absolute，relative表示<div>标记的位臵是相对于它所在的窗口的，absolute 表示<div>标记的位臵是绝对的，可以通过表 1.10 所示的属性进行设臵。

表1.10 属性说明

style属性的另一个常用功能是控制<div>标记的display属性，用于设臵元素的浮动特征，当display被设臵为block（块）时，容器中所有元素都将会被当作一个单独的块放入到页面中；将display设臵为inline，将使其行为和元素inline一样，即使是普通的块元素也会被组合成像<span>那样的输出流输出到页面上；将display设臵为none，<div>元素就像从页面中被移走一样，它下面的所有元素都会自动跟上填充。

说明：如果在网页中，单独使用<div>而不加任何CSS-P（Cascading Style Sheets Positioning的简写，是 CSS 的一个扩展，它可以控制任何东西在网上的位置），它在网页中的效果与使用<p>标记是一样的。

实现过程

（1）在要弹出无边框窗口页面的最底部加入一个DIV层，其name属性的值为User，并通过其 style 属性控制层的大小和层的隐藏，该层中的内容为无边框窗口要显示的内容。User 层的完成代码如下。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tr>

</table>

</form>

</td>

</tr>

</table>

</div>

注意：不要忘记在层中加入控制层隐藏的按钮（即关闭按钮），该按钮执行的操作是将User层的display样式设置为none。

（2）在页面中加入“用户登录”超级链接，该超级链接执行的操作是调用自定义JavaScript函数Myopen()显示User层。关键代码如下。

（3）编写自定义的JavaScript函数Myopen()，用于控制层的居中显示，代码如下。

function Myopen(divID)

{

//根据传递的参数确定显示的层

divID.style.display='block';

divID.style.left=(document.body.clientWidth-240)/2;

divID.style.top=(document.body.clientHeight-139)/2;

}

</script>

举一反三

根据本实例，读者可以：

制作在线影院中的会员登录页面；

制作在线论坛中的版主登录页面；

开发游戏网站。

实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\01\043

实例说明

通常情况下，网页中弹出的窗口都是包括标题栏和有边框的，这样的窗口有时会影响页面的整体效果。根据实际情况将弹出的窗口设臵为无边框的窗口，会让页面更加引人注目，同时也可统一网站风格。例如，明日实业网站的管理员登录窗口就是无边框窗口，运行本实例，单击页面下方的“TOP”超级链接，即可弹出无边框的居中显示的管理员登录窗口，如图1.49所示。这样可以使页面看起来更和谐统一。需要说明的是该实例只适合IE 6.0 及以下版本，对于已经安装更新版本（如更新版本为SP1）的浏览器弹出的窗口不能指定尺寸，只能全屏显示。

图1.49 应用JavaScript实现指定尺寸无边框无滚动条窗口

技术要点

本实例主要应用window对象的open()方法，弹出一个最大化的窗口，再通过window对象的resizeTo()方法和moveTo()方法控制窗口的尺寸和显示位臵。由于window对象的open()方法在实例001中已经介绍，下面对window对象的resizeTo()方法进行详细介绍。

功能：将当前窗口改变成(x,y)大小。

语法格式：

window.resizeTo(x,y)

参数说明如下。

● x：表示水平宽度，单位为像素。

● y：表示垂直高度，单位为像素。

注意：window对象的resizeTo()方法在IE 6.0 以上版本中，只能改变以一般状态显示的窗口的尺寸，不能改变最大化窗口（用window对象的open()方法中设置了fullscreen=1参数的窗口）的尺寸。

实现过程

（1）在实例的 index.htm 页面中，添加控制窗口弹出的超级链接，本例中采用的是图片热点超级链接，该超级链接执行的操作是调用自定义的JavaScript函数manage()。manage()函数实现了在网页中弹出一个以最大化方式显示的窗口，该窗口的内容是login.htm页的内容。关键代码如下。

function manage()

{

var w=window.open('login.htm','','fullscreen=1,scrollbars=0');

}

</script>

</map>

（2）制作弹出的窗口页面login.htm，在该页面中添加控制窗口位臵和大小的JavaScript代码。代码如下。

self.resizeTo(321,203);

width=screen.width;

height=screen.height;

self.moveTo((width-240)/2,(height-139)/2);

</script>

（3）在 login.htm页面的<body>标记中还需要加入“scroll=no”，否则弹出的窗口会带有滚动条。代码如下。

举一反三

根据本实例，读者可以：

开发宽带影院中的在线视听窗口或歌词查看窗口；

开发游戏网站中的用户登录窗口。

1.8 水平导航条应用

网站导航条对于每个网站都是必不可少的，它相当于城市中的路标，可以指引浏览者找到自己热衷的内容。水平导航条有很多种，如本节中介绍的带图标的文字导航条、Flash导航条、图片按钮导航条、质感效果的导航条等。下面将介绍网站中常用的几种导航条。

实例044 图片按钮导航条

这是一个应用较为广泛的实例

实例位置：光盘\mingrisoft\01\044

实例说明

网站网页形式的多样性是吸引浏览者的一个重要途径，增强页面的立体感是网站多样性的一种表现，设计按钮形式的导航条使导航效果更加明显，给人以更加真实的感觉。当浏览者单击该链接按钮时，给浏览者一种直接触摸按钮的感觉。运行本实例，如图1.50所示。

图1.50 图片按钮导航条

技术要点

本实例主要应用图片热点超级链接实现，通过HTML的<map>标记可以为图片添加热点。为图片设臵热点超级链接的语法格式如下。

<mapname=“MapName”>

„

</map>

标记<map>的属性如表1.11所示。

表1.11 <map>标记的属性说明

在<map>标记中，根据属性shape的取值不同，相应坐标的设定也不同。下面介绍属性shape的3种取值以及相应坐标的设定。

● 设定属性shape 的属性值为rect。

属性shape取值为rect，表示矩形区域，属性coords的坐标形式为“x1，y1，x2，y2”。其中，x1、y1代表矩形左上角的x坐标和y坐标，x2、y2代表矩形右下角的x坐标和y坐标。

● 设定属性shape 的属性值为circle。

属性shape取值为circle，表示圆形区域，属性coords的坐标形式为“x，y，r”。其中，x、y为圆心坐标，r为圆的半径。

● 设定属性shape 的属性值为poly。

属性shape取值为poly，表示多边形区域，属性coords的坐标形式为“x1，y1，x2，y2，…，xn，yn”。其中，xn、yn代表构成多边形每一点的坐标值，n的取值为1，2，3，…，n，多边形有几边就有几对x、y坐标。

注意：应在<body>区域中的任一位置定义<map name=mapname></map>标签，name 是图片热点的名称。

实现过程

（1）在图像制作软件中设计一张带有超级链接按钮的图片。

（2）在Dreamweaver的菜单中，选择“插入”→“图像”命令，将插入一张图片，使用鼠标左键单击选中此图片，此时在“属性”面板中可以看到此图片的相关属性。初次使用“属性”面板时其默认为“简化”形式，单击右下方的向下箭头可打开其扩展属性模式。

（3）选择图片后，在其“属性”面板中选择“矩形热点工具”，为图片的每个按钮添加热点超级链接。选中热点区域，在其“属性”面板中的“超级链接”文本框中输入超级链接的地址，本实例中设臵为空链接“#”，依次应用每个热点的onClick事件，调用JavaScript脚本弹出相应提示对话框。代码如下。

</map>

举一反三

根据本实例，读者可以：

在游戏网站中实现图形化的的导航条；

实现公司门户网站中的导航条；

实现个人主页中的导航条。

实例045 导航条的动画效果

本实例可以方便操作、提高效率

实例位置：光盘\mingrisoft\01\045

实例说明

导航条是网站设计不可缺少的元素之一，它能正确地引导浏览者查找需要的资料，成为浏览者的网站路标。同时网页导航条的设计风格也能影响页面的整体效果，对于一个静态元素居多的页面，可以为导航条添加动态效果，这样可以使整个网站不至于太呆板，增强网页的欣赏价值。例如，在明日实业网站中，为导航条设计了动画效果，这样只要用户将鼠标移动到任意一个导航按钮上时，该按钮都会突出显示，鼠标移走后，又恢复为原来位臵，如图1.51所示。

图1.51 导航条的动画效果

技术要点

本实例主要是通过Image对象的鼠标事件控制Image对象src属性的值实现的。

在JavaScript里提供了对图像进行处理的专用对象Image来装入文档的图形。Image对象类型与其他对象的差别在于，其允许通过构造器显示和创建新的Image对象类型，创造和预装入的图形之前并非是Web页面的组成部分。Image对象存在浏览器的缓冲区中，用于替换已经显示的图像。

用imag()构造器创建图形的语法格式如下。

ObjImg=new image()　//创建了一个新的Image对象，并将其赋予变量ObjImg

ObjImg.src="图片文件相对路径"　//设置Image对象的src属性

在利用Image对象编程之前，首先利用IMG标志显示属性。在HTML中，要显示图片可以用如下语句来实现。

在JavaScript中可以用下面的语句访问Image对象。

document.Img.src=" menu_01.gif";

实现过程

（1）准备14张图片，其中7张是鼠标移出时显示的图片，图片的名称为“menu_0”+1～7的数字+“.gif”，另7张是鼠标移入时显示的图片，图片的名称为“menu_0”+1～7的数字+“_over.gif”。

注意：如果图片menu_01.gif代表的是公司首页的图片，则menu_01_over.gif代表的图片一定也是公司首页的图片。

（2）将过程（1）所准备的7张鼠标移出时显示的图片按顺序插入到页面中的适当位臵，并设臵其鼠标事件 onMouseMove 和 onMouseout 执行的操作，这里分别调用两个不同的自定义JavaScrip函数，关键代码如下。

</td>

</td>

</td>

</td>

</td>

</td>

</td>

（3）编写自定义的JavaScript函数move()和out()。move()用于设臵鼠标移入导航按钮上时显示的图片，out()用于设臵鼠标移出导航按钮上时显示的图片，代码如下。

//鼠标移动效果

var A_Img=new Image();

function move(image,num)

{

image.src='Images/top/menu_0'+num+'_over.gif';

}

function out(image,num)

{

image.src='Images/top/menu_0'+num+'.gif';

}

</script>

举一反三

根据本实例，读者可以：

开发企业门户网站的导航条；

开发在线影院的导航条；

开发电子商务网站的导航条。

实例046 不用图片实现质感导航条

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\01\046

实例说明

很多网站都采用了质感比较强的导航条，用以增强网页的视觉冲击力，大多数的情况下这些导航条的背景都是通过图像制作软件制作的质感图片实现的，应用这种方法制作的网站，如果想改变网页的主体色调会比较麻烦，需要再次修改图片。下面介绍一种只需修改网页代码就可改变导航条背景色的方法，那就是应用 CSS 样式实现。运行本实例，如图 1.52 所示，导航条背景的质感效果就是通过CSS样式实现的。

图1.52 不用图片实现质感导航条

技术要点

本实例主要通过CSS的波浪变形效果滤镜Wave实现。Wave滤镜的基本语法如下。

{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}

参数说明如下。

● add：表示是否要把对象按照波形样式打乱，值为true 或false。

● freq：表示波形的频率，也就是指定在对象上一共需要产生多少个完整的波纹。

● lightstrength：表示可以对波纹增强光影效果，范围是0～100。

● phase：用来设臵正弦波的偏移量。

● strength：代表振幅的大小。

实现过程

（1）在网页导航条的位臵添加一个单线边框的表格，并将表格的背景颜色设臵为页面的主色调，同时添加导航文字。代码如下。

<tablewidth="100%"height="27"　border="1"cellpadding="-2" cellspacing="-2"

bordercolor="#FFFFFF"bordercolordark="#FFFFFF"bordercolorlight="#006666"

bgcolor="#336666">

<tdvalign="bottom"><ahref="#" class="shadow">公司首页</a></td>

<tdvalign="bottom"><ahref="#" class="shadow">公司简介</a></td>

<tdvalign="bottom"><ahref="#" class="shadow">产品介绍</a></td>

<tdvalign="bottom"><ahref="#" class="shadow">技术支持</a></td>

<tdvalign="bottom"><ahref="#" class="shadow">公司荣誉</a></td>

<tdvalign="bottom"><ahref="#" class="shadow">网站地图</a></td>

<tdvalign="bottom"><ahref="#" class="shadow">招贤纳士</a></td>

<tdvalign="bottom"><ahref="#" class="shadow">与我联系</a></td>

</tr>

</table>

（2）为过程（1）中制作的导航条添加质感效果，即在<table>标记中添加style属性，该属性值为Wave滤镜的代码，具体代码如下。

style="filter:wave(add=false,freq=1,lightstrength=50,phase=50,strngth=10)"

举一反三

根据本实例，读者可以：

为图片添加特殊的效果；

实现网站的自动换肤功能。

1.9 下拉菜单式导航条

下拉菜单式导航条可以使整个页面看起来更规范，下拉菜单式导航条可以分为二级导航菜单、半透明背景的下拉菜单、弹出式下拉菜单等。下面通过具体实例详细介绍实现下拉菜单式导航条的方法。

实例047 二级导航菜单

本实例可以方便操作、提高效率

实例位置：光盘\mingrisoft\01\047

实例说明

网站中的导航条在整个网站中充当着网站路标的作用，如果一个网站的导航条层次混乱，或是分类不清晰，就会给网站的浏览者带来诸多不便，因此设计一个层次分明的网站导航对于一个网站及为重要。例如，企业进销存管理系统中的菜单大致可以分为“基础信息”、“采购管理”、“库存管理”等，但是在基础信息中还要分为“客户信息管理”、“商品信息管理”、“供应商信息管理”等，这就需要建立二级导航菜单。运行本实例，将鼠标移动到一级菜单“基础信息”超级链接上时，在其下方将显示与其对应的二级导航菜单，如图1.53所示。

图1.53 二级导航菜单

技术要点

实现二级导航菜单主要应用JavaScript的switch语句确定要显示的二级菜单的内容，switch语句的语法格式如下：

switch (expression)

{

case label :

statement;

break;

case label :

statement;

break;

...

default: statement;

}

说明：

①JavaScript 执行switch 语句时，首先计算switch后括号内表达式的值。当此表达式的值与某个case后面的常数表达式的值相等时，就执行此case后的语句。如果所有case后的常数表达式的值都不等于此表达式的值，就执行default后面的语句。

②当执行某个 case 后的语句时如果遇到 break 语句，就结束这条 switch 语句的执行，转去执行这条switch之后的语句。break语句也可以省略，但这时程序会一直执行到这条switch语句的结束标记，即右大括号“}”。

注意：通常情况下，都应该在switch语句的每个分支后面加上break语句，使JavaScript只执行匹配的分支。

实现过程

（1）在网页中适当的位臵添加一级导航菜单，本实例中的一级导航菜单是由一系列空的超级链接组成的，这些空的超级链接执行的操作是调用自定义的JavaSctript函数Fsubmenu()显示对应的二级菜单，在调用时需要传递一个标记主菜单项的参数，关键代码如下：

|<a href="#" onClick="Fsubmenu('采购')">采购管理</a>

|<a href="#" onClick="Fsubmenu('库存')">库存管理</a>

|<a href="#" onClick="Fsubmenu('销售')">商品销售</a>

|<a href="#" onClick="Fsubmenu('查询')">查询统计</a>

|<a href="#" onClick="Fsubmenu('往来')">往来管理</a>

|<a href="#" onClick="Fsubmenu('系统')">系统设置</a>

</td>

（2）在网页中显示二级菜单的位臵添加一个名为“submenu”的DIV层，代码如下。

（3）编写自定义 JavaScript函数Fsubmenu()，用于根据鼠标移动到某一级菜单时传递的参数值在页面的相应位臵显示对应的二级菜单，代码如下。

functionFsubmenu(value)

{

switch (value)

{

case "基础":

break;

case "采购":

submenu.innerHTML="<a href='#' target='mainF'>商品采购</a>|<ahref='#' target='mainF'>采购查询</a>";

break;

case "库存":

submenu.innerHTML="<a href='#' target='mainF'>商品入库</a>|<a href='#' target='mainF'>商品入库退货</a>|<a href='#' target='mainF'>库存查询</a>|<ahref='#' target='mainF'>价格调整</a>";

break;

case "销售":

submenu.innerHTML="<a href='#' target='mainF'>商品销售</a>|<a href='#' target='mainF'>商品销售退货</a>|<a href='#' target='mainF'>";

break;

case "查询":

break;

case "往来":

break;

case "系统":

submenu.innerHTML="<a href='#' target='mainF'>添加操作员</a>|<ahref='#' target='mainF'>更改操作员密码</a>|<ahref='#' target='mainF'>删除操作员</a>";

break;

}

</script>

举一反三

根据本实例，读者可以：

开发企业网站后台管理模块的导航条；

开发电子商务网站后台管理模块的导航条。

实例048 半透明背景的下拉菜单

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\01\048

实例说明

网页设计中采用半透明的效果给人以亦真亦幻的感觉，使整个网站更具吸引力。因此本实例将图书馆管理系统的下拉菜单设臵为半透明效果。运行本实例，将鼠标移动到“系统设臵”等导航链接上时，在其下方将显示出半透明的下拉式菜单，透过此下拉菜单仍可以看到页面上的内容，例如将鼠标移动到“系统设臵”超级链接上时，其下方会显示出半透明背景的下拉菜单，如图1.54所示。

图1.54 半透明背景的下拉菜单

技术要点

实现半透明背景的下拉菜单，首先需要在页面中实现下拉菜单，然后再通过设臵下拉菜单的 CSS 样式实现半透明效果。实现下拉菜单的半透明效果可以应用 CSS 样式的透明效果滤镜alpha实现。透明效果滤镜alpha的语法如下。

{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

功能：

alpha属性是把一个目标元素与背景混合。设计者可以指定数据来控制混合的程度。这种“与背景混合”通俗地说是一个元素的透明度。通过指定坐标可以指定点、线、面的透明度。

参数说明如下。

● opacity：代表透明度水准；默认的范围是0～100，其实是百分比的形式，即0 代表完全透明，100代表完全不透明。

● finishopacity：可选，如果想要设臵渐变的透明效果，可以使用该参数指定结束时的透明度。范围也是0～100。

● style：指定透明区域的形状特征，其中，0 代表统一形状，1 代表线形，2 代表放射状，3代表长方形。

● startx：代表渐变透明效果的开始x坐标。

● starty：代表渐变透明效果的开始y坐标。

● finishx：代表渐变透明效果结束x坐标。

● finishy：代表渐变透明效果结束y坐标。

实现过程

（1）编写实现下拉菜单的 JavaScript 代码，该代码中主要包括控制下拉菜单的显示和隐藏的自定义函数。由于该段代码属于通用型代码，所以将其保存在一个单独的.JS文件中，名称为menu.JS，在使用该代码的页面中只需加入如下代码即可。

menu.JS文件的关键代码如下。

varmenuOffX=0

//菜单距链接文字最左端距离

varmenuOffY=18

//菜单距链接文字顶端距离

var fo_shadows=newArray()

var linkset=newArray()

var IE4=document.all&&navigator.userAgent.indexOf("Opera")==-1

var netscape6=document.getElementById&&!document.all

var netscape4=document.layers

//显示下拉菜单的方法

function showmenu(e,vmenu,mod)

{

if (!document.all&&!document.getElementById&&!document.layers)

return

which=vmenu

clearhidemenu()

IE_clearshadow()

menuobj=IE4?document.all.popmenu :netscape6?document.getElementById("popmenu") :netscape4?document.popmenu : ""

menuobj.thestyle=(IE4||netscape6)?menuobj.style :menuobj

if (IE4||netscape6)

menuobj.innerHTML=which

else{

menuobj.document.write('<layer name="other" bgColor="#E6E6E6"width="165" onmouseover="clearhidemenu()"

onmouseout="hidemenu()">'+which+'</layer>')

menuobj.document.close()

}

menuobj.contentwidth=(IE4||netscape6)?menuobj.offsetWidth :menuobj.document.other.document.width

menuobj.contentheight=(IE4||netscape6)?menuobj.offsetHeight :menuobj.document.other.document.height

eventX=IE4?event.clientX :netscape6?e.clientX : e.x

eventY=IE4?event.clientY :netscape6?e.clientY : e.y

var rightedge=IE4?document.body.clientWidth-eventX :window.innerWidth-eventX

varbottomedge=IE4?document.body.clientHeight-eventY :window.innerHeight-eventY

if (rightedge<menuobj.contentwidth)

menuobj.thestyle.left=IE4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : netscape6?

window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth

else

menuobj.thestyle.left=IE4? IE_x(event.srcElement)+menuOffX :netscape6?window.pageXOffset+eventX : eventX

if (bottomedge<menuobj.contentheight&&mod!=0)

menuobj.thestyle.top=IE4?document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 :

netscape6?window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight

else

menuobj.thestyle.top=IE4? IE_y(event.srcElement)+menuOffY :netscape6?window.pageYOffset+eventY+10 :eventY

menuobj.thestyle.visibility="visible"

IE_dropshadow(menuobj,"#999999",3)

return false

}

function IE_y(e)

{

var t=e.offsetTop;

while(e=e.offsetParent)

{

t+=e.offsetTop;

}

return t;

}

function IE_x(e)

{

var l=e.offsetLeft;

while(e=e.offsetParent){

l+=e.offsetLeft;

}

return l;

}

function IE_dropshadow(el, color, size)

{

var i;

for (i=size; i>0; i--){

var rect=document.createElement('div');

var rs= rect.style

rs.position= 'absolute';

rs.left= (el.style.posLeft+i)+'px';

rs.top= (el.style.posTop+i)+'px';

rs.width= el.offsetWidth+'px';

rs.height= el.offsetHeight+'px';

rs.zIndex= el.style.zIndex-i;

rs.backgroundColor= color;

var opacity=1-i/(i+1);

rs.filter= 'alpha(opacity='+(100 *opacity)+')';

fo_shadows[fo_shadows.length]= rect;

}

function IE_clearshadow()

{

for(var i=0;i<fo_shadows.length;i++){

if (fo_shadows[i])

fo_shadows[i].style.display="none"

}

fo_shadows=newArray();

}

//隐藏菜单的方法

functionhidemenu()

{

if (window.menuobj)

menuobj.thestyle.visibility=(IE4||netscape6)? "hidden" : "hide"

IE_clearshadow()

}

functiondynamichide(e)

{

if (IE4&&!menuobj.contains(e.toElement))

hidemenu()

else if (netscape6&&e.currentTarget!= e.relatedTarget&& !contains_netscape6(e.currentTarget, e.relatedTarget))

hidemenu()

}

functiondelayhidemenu()

{

if (IE4||netscape6||netscape4)

delayhide=setTimeout("hidemenu()",500)

}

function clearhidemenu()

{

if (window.delayhide)

clearTimeout(delayhide)

}

functionhighlightmenu(e,state)

{

if (document.all)

source_el=event.srcElement

else if (document.getElementById)

source_el=e.target

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

else{

while(source_el.id!="popmenu")

{

source_el=document.getElementById? source_el.parentNode : source_el.parentElement

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

//鼠标移入时设置菜单背景

function overbg(tdbg)

{

tdbg.style.background='url(Images/item_over.gif)'

tdbg.style.border='#9CA6C61px solid'

}

//鼠标移出时设置菜单背景

function outbg(tdbg)

{

tdbg.style.background='url(Images/item_out.gif)'

tdbg.style.border=''

}

var sysmenu='<tablewidth=80><tr><td id=libraryonMouseOver=overbg(library)onMouseOut=outbg(library)><ahref=library.do?

action=libraryQuery>图书馆信息</a></td></tr>\

<tr><td id=manager onMouseOver=overbg(manager) onMouseOut=outbg(manager)><a

href=manager.do?action=managerQuery>管理员设置</a></td></tr>\

<tr><td id=paraonMouseOver=overbg(para) onMouseOut=outbg(para)><ahref=parameter.do?action=parameterQuery>参数设

置</a></td></tr>\

<tr><td id=bookcaseonMouseOver=overbg(bookcase)onMouseOut=outbg(bookcase)><ahref=bookCase.do?action=bookcase

Query>书架设置</a></td></tr>\

</table>'

„„

var sortmenu='<tablewidth=100><tr><td id=readerSort onMouseOver=overbg(readerSort) onMouseOut=outbg(readerSort)><a

href=borrow.do?action=readerBorrowSort>读者借阅排行榜</a></td></tr>\

<tr><td id=bookSort onMouseOver=overbg(bookSort) onMouseOut=outbg(bookSort)><ahref=borrow.do?action=bookBorrow

Sort>图书借阅排行榜</a></td></tr>\

</table>'

（2）在页面中加入导航链接，同时设臵其鼠标的onMouseover和onMouseout事件，分别用于控制鼠标移入导航链接上时显示下拉菜单和鼠标移出导航链接时隐藏下拉菜单。关键代码如下。

<a onmouseover=showmenu(event,sysmenu) onmouseout=delayhidemenu() class='navlink' style="CURSOR:hand" >系统设置</a>┊

<a onmouseover=showmenu(event,readermenu) onmouseout=delayhidemenu() class='navlink' style="CURSOR:hand" >读者管理</a>┊

<a onmouseover=showmenu(event,bookmenu) onmouseout=delayhidemenu() class='navlink' style="CURSOR:hand" >图书管理</a>┊

<a onmouseover=showmenu(event,borrowmenu) onmouseout=delayhidemenu() class='navlink' style="CURSOR:hand" >图书借还</a>┊

<a onmouseover=showmenu(event,querymenu) onmouseout=delayhidemenu() class='navlink' style="CURSOR:hand" >系统查询</a>┊

（3）在CSS样式表文件中加入 menuskin类选择符，用于设臵下拉菜单的半透明效果，代码如下。

.menuskin

{

BORDER:#6666661px solid;VISIBILITY:hidden;

POSITION: absolute;

/*BACKGROUND-COLOR:#EFEFEF;*/

background-image:url("../Images/item_out.gif");

background-repeat : repeat-y;

Filter:Alpha(Opacity=85);

}

（4）在页面中加入DIV层，名称为“popmenu”，用于引用menuskin类选择符设臵下拉菜单的半透明效果。代码如下：

<div class=menuskin id=popmenu

onmouseover="clearhidemenu();highlightmenu(event,'on')"

onmouseout="highlightmenu(event,'off');dynamichide(event)"

style="Z-index:100;position:absolute;"></div>

举一反三

根据本实例，读者可以：

开发办公自动化管理系统的导航菜单；

开发物资管理系统的导航菜单；

开发网站后台管理页面的导航菜单。

实例049 展开式导航条

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\01\049

实例说明

对于一个企业网站来说，“联系我们”超级链接是必不可少的。为了使其更加引人注意，可以将其制作成具有展开式动画效果的导航条。运行本实例，读者可以看到页面右侧的“联系我们”导航条是慢慢展开的，并且每次刷新页面时，都会以同样的动画效果展开，展开效果如图1.55、图1.56所示。

图1.55 展开式导航条

图1.56 展开后的导航条

技术要点

本例主要通过自定义JavaScript函数控制图片（Image）对象的height属性值实现。为了实现动画效果，在JavaScript函数中还需要应用setTimeout方法延迟执行改变图片高度的操作。

注意：调整setTimeout()方法的运行间隔时间的值，可以控制展开的速度，该值以毫秒为单位。

实现过程

（1）在网页中要显示“联系我们”导航条的位臵插入一张全部展开后的“联系我们”导航图片，在需要设臵超级链接的文字上添加图片热点并设臵相应的超级链接。

（2）将图片的height属性值设臵为0，name属性设臵为our。

（3）编写自定义的JavaScript函数ourmove()，用于实现图片的展开效果。ourmove()函数的代码如下：

function ourmove()

{

if(our.height<163)

{

our.height=our.height+9

setTimeout(ourmove,1)

}

</script>

（4）在当前页面的最底部，也就是</body>标记之前，添加如下代码调用 ourmove()，实现导航条的展开式动画效果。

ourmove();

</script>

注意：一定要将调用ourmove()函数的代码放在</body>标记之前，否则页面的其他内容就要等到动画显示完毕才可以显示，这样就达不到预期的效果了。

举一反三

根据本实例，读者可以：

开发企业门户网站的“联系我们”导航条；

开发网站中的二级导航菜单。

实例050 用层制作下拉菜单1

这是一个可以启发思维的实例

实例位置：光盘\mingrisoft\01\050

实例说明

本实例通过层制作了一个下拉菜单，当用鼠标指向下拉菜单时，会根据指定的菜单在下面以下拉的方式显示下拉列表，并可以通过单击下拉列表中的选项进入指定的网页，运行结果如图1.57、图1.58、图1.59所示。

图1.57 下拉菜单的初始效果

图1.58 弹出下拉菜单的菜单项

图1.59 在下拉菜单中选中菜单项

技术要点

本实例主要应用CSS样式中的display属性来控制层是否显示，当层显示时，用CSS样式中的rect()方法来对层以y轴逐渐增大的方式进行局部显示。下面对display属性和rect()方法进行详细说明。

display属性的语法格式。

display属性的参数取值如表1.12所示。

表1.12 display属性的参数说明

功能：设臵或检索对象是否及如何显示。

rect方法的语法格式：

clip : auto | rect( number number number number )

参数说明如下。

● auto：对象无剪切。

● rect（number number number number）：依据上-右-下-左的顺序提供自对象左上角为（0,0）坐标计算的4个偏移数值，其中的任一数值都可用auto替换，即此边不剪切。

功能：检索或设臵对象的可视区域。区域外的部分是透明的，必须将 postiton 的值设为absolute，此属性方可使用。

实现过程

（1）在页面中添加CSS样式，用于改变下拉菜单的颜色及位臵。代码如下。

.menubar{position:absolute;top:10px;width:100px;height:20px;cursor:default;

border-width:1px;border-style:outset;color:#99FFFF;background:#669900}

.menu{position:absolute;top:32px;width:140px;display:none;border-width:2px;

border-style:outset;border-color:white sliver sliver white;background:#333399;

padding:15px}

.menu A{text-decoration:none;color:#99FFFF;}

.menu A:hover{color: #FFFFFF;}

</style>

（2）在页面中添加一个表格，用于控制下拉菜单的位臵及大小。代码如下。

<tr>

<div align="center"id="Tdiv_1" class="menubar" onmouseover="divControl(1)"

onmouseout="divControl(0)">

教育网站

</div>

</td>

<div align="center"id="Tdiv_2" class="menubar" onmouseover="divControl(1)"

onmouseout="divControl(0)">

电脑丛书网站

</div>

</td>

<div align="center"id="Tdiv_3" class="menubar" onmouseover="divControl(1)"

onmouseout="divControl(0)">

新出图书

</div>

</td>

<div align="center"id="Tdiv_4" class="menubar" onmouseover="divControl(1)"

onmouseout="divControl(0)">

其他网站

</div>

</td>

</tr>

<tr>

<div align="left"id="Div1" class="menu" onmouseover="keepstyle(this)"

onmouseout="hidediv(this)">

<a href="#">重庆XX大学</a><br>

<a href="#">长春XX大学</a><br>

<a href="#">吉林XX大学</a>

</div>

</td>

<div align="left"id="Div2" class="menu" onmouseover="keepstyle(this)"

onmouseout="hidediv(this)">

<a href="http://www.mingrisoft.com">明日科技VB图书</a><br>

<a href="http://www.mingrisoft.com">明日科技Delphi图书</a><br>

<a href="http://www.mingrisoft.com">明日科技Java图书</a>

</div>

</td>

<div align="left"id="Div3" class="menu" onmouseover="keepstyle(this)"

onmouseout="hidediv(this)">

<a href="http://www.mingrisoft.com">Delphi XX图书</a><br>

</div>

</td>

<div align="left"id="Div4" class="menu" onmouseover="keepstyle(this)"

onmouseout="hidediv(this)">

<a href="http://www.mingrisoft.com">明日科技主页</a><br>

<a href="http://www.mingrisoft.com">明日科技图书网</a><br>

<a href="http://www.mingrisoft.com">明日技术支持网</a></div>

</td>

</table>

（3）编写用于实现下拉菜单的JavaScript代码。

自定义函数divControl()，判断是否显示相对应的下拉列表。

function divControl(show){

window.event.cancelBubble=true;

var objID=event.srcElement.id;

var index=objID.indexOf("_");

var mainID=objID.substring(0,index);

var numID=objID.substring(index+1);

if(mainID=="Tdiv"){

if(show==1){eval("showdiv("+"Div"+numID+")");}

else{eval("hidediv("+"Div"+numID+")");}

}

自定义函数displayMenu()，在显示下拉菜单时，以下拉方式显示下拉菜单。

var nbottom=0,speed=2;

function displayMenu(obj){

obj.style.clip="rect(0 100%"+nbottom+"%0)";

nbottom+=speed;

if(nbottom<=100){

timerID=setTimeout("displayMenu("+obj.id+"),1");

}

else clearTimeout(timerID);

}

自定义函数showdiv()，显示下拉列表的下拉选项。

function showdiv(obj){

obj.style.display="block";

obj.style.clip="rect(0 0 0 0)";

nbottom=5;

displayMenu(obj);

}

自定义函数hidediv()，隐藏下拉列表的下拉选项。

functionhidediv(obj){　//

nbottom=0;

obj.style.display="none";

}

function keepstyle(obj){　　//在下拉菜单中移动时,保持下拉列表的样式

obj.style.display="block";

}

</script>

举一反三

根据本实例，读者可以：

开发可以隐藏的导航条。

实例051 用层制作下拉菜单2

本实例可以美化界面

实例位置：光盘\mingrisoft\01\051

实例说明

本实例在打开窗口时，在页面中会出现一个主菜单，当鼠标指向主菜单时，主菜单中的菜单项会以奇偶的形式从左右两边向中间移动，并且将透明的菜单项逐渐显示为不透明状态，运行结果如图1.60、图1.61所示。

图1.60 下拉菜单的动态效果

图1.61 选择下拉菜单中的菜单项

技术要点

本实例主要应用CSS样式的opacity和pixelLeft属性来控制层的透明度及横向位臵。下面对opacity和pixelLeft属性进行详细说明。

● opacity：代表透明水准，默认的范围是0～100，0 代表完全透明，100 代表完全不透明。

● pixelLeft：用于改变层的水平位臵。只有在 position 属性设为 absolute 时，该属性才会有效。

实现过程

（1）在页面中添加N个层，用来显示下拉菜单中的各个选项。代码如下。

<div align=center id="div1" style="position:absolute; left:50px; top:55px;width:99px;height:19px; z-index:2;background-color:#00CC66; layer-background-color:#0099CC;border:1pxnone#000000; filter:alpha(opacity=0);padding-top:4; cursor:hand; font-size:9pt; color:#FFFFFF;"