|
一、在网页中制作弹出窗口
经常上网的朋友肯定会遇到这样的情况，当登陆某网站的首页时，立刻会弹出一个窗口，或者在点击某个连接或点击某按钮时也会弹出窗口，有时这个窗口几秒钟后会自动消失，有时需要手动将其关闭。通常这些窗口里面显示的内容都是网站的一些提示信息，如注意事项、版权信息、警告、欢迎光临等。
实际上制作这样的页面效果非常容易，只要在该页面的代码中加入几段命令即可实现。下面咱们就一起来深度探索其制作原理。
(一)弹出窗口基本代码
若希望在制作的网页中把事先已经做好的"abc.htm"，这一页面做为窗口弹出的话，只要把下面的代码复制到您的网页中的<head> 和 </head> 之间即可：
<SCRIPT LANGUAGE="javascript">
<!-- window.open('abc.htm', '窗口名称', 'width=260, height=200, top=0,left=0, toolbar=no,menubar=no, scrollbars=no, resizable=no,location=no, status=no') -->
</SCRIPT>
实例解析：
1、<SCRIPT LANGUAGE="javascript">： 因本弹出窗口的代码是一段 “javascript” 角本语言，这段代码是角本的开始标签；
2、window.open： 弹出新窗口的命令；
3、'abc.htm'： 弹出窗口的文件名；
4、'窗口名称'： 弹出窗口的名字（不是文件名），非必须，可用空''代替；
5、width=260 弹出窗口的宽度；
6、height=300： 弹出窗口的高度；
7、top=0： 窗口距离屏幕上方的象素值；
8、left=0： 窗口距离屏幕左侧的象素值；
9、toolbar=no： 是否显示工具栏，yes为显示；
10、menubar，scrollbars： 表示菜单栏和滚动栏。
11、resizable=no： 是否允许改变窗口大小，yes为允许；
12、location=no： 是否显示地址栏，yes为允许；
13、status=no： 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
14、</SCRIPT>： Javascript 脚本结束;
15、<!-- -->： 该标签的目的是避免浏览器把没有使用大于号和小于号的代码显示出来，这个主要是针对低版本的浏览器。
(二) 用函数控制弹出窗口
建立弹出窗口函数,使用起来更方便，调用函数可以在打开页面的时候弹出窗口，也可以在关闭该页面的时候弹出窗口，而且还可以利用链接或按钮进行调用。请看下面的实例：
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin()
{
window.open ('abc.htm', '窗口名称', 'width=260, height=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no')
}
-->
</script>
</head>
<body>
网页内容
</body>
</html>
上面的实例中定义了一个函数openwin(),函数的功能就是打开一个名为 “abc.htm”的窗口。在调用它之前是没有任何用途的，那么怎么调用呢？请看下面的实例讲解。
1、打开页面的时候自动弹出： 只要在<body>标签中加入相应的代码即可，代码是 <body onload="openwin()">；
2、关闭页面后弹出窗口： 代码是 <body onunload="openwin()">
3、用一个连接调用：代码是 <a href="#" onclick="openwin()">打开一个窗口</a>
4、用一个按钮调用： 代码是 <input type="button" onclick="openwin()" value="打开窗口">
5、 同时弹出两个窗口，该功能只要对源代码稍微改动一下即可。具体改动方法如下：
<script LANGUAGE="JavaScript">
<!--
function openwin()
{
window.open ('abc1.htm', '窗口名称1', 'width=260, height=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no')
window.open ('abc2.htm', '窗口名称2', 'width=260, height=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no')
}
-->
</script>
注意事项：为避免弹出的两个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖。最后用上面介绍过的四种方法调用即可。两个窗口的name(窗口名称1和窗口名称2)不要相同，或者干脆全部为空。
(三) 定时关闭和手动关闭打开的窗口
1、自动关闭窗口
首先，将如下代码加入 “abc.htm” 文件的<head>区：
<script language="JavaScript">
<!--
function closeit()
{
setTimeout("self.close()",10000)
}
-->
</script>
实例解析：
(1) 上例是在所弹出的窗口 “abc.htm” 文件中定义了一个关闭页面的函数，其中的 10000 这个数值是毫秒，每秒等于1000毫秒。那么本例将在10秒钟以后关闭窗口;
(2) 然后再用<body onload="closeit()"> 这一句话代替 “abc.htm” 中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)
2、手动关闭窗口
只要在弹出的窗口文件中的 <body>与</body>之间加入下面代码即可在页面中出现一个名为“关闭” 的按钮，点击后即可实现关闭该窗口的效果。
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
注意：除了点击打开窗口外，其它形式的窗口自动弹出很容易被一些工具栏阻挡，如上网助手、Google、百度工具栏和IE6 SP2自带的“弹出窗口阻止程序”等。因此，在制作网页时千万不要将重要内容放到弹出窗口中。
二、如何在网页中播放音频及视频文件
通过网页播放音视频的方法较多，我们在这里介绍两个比较常用的方法：
（一）使用 <bgsound> 标签播放背景音频文件
<bgsound> 标签属于单标签，其属性共有5个，其中balance是设置音乐的左右均衡；delay是进行播放延时的设置；loop是循环次数的控制；src则是我们音乐文件的路径，volume是音量设置。一般在添加背景音乐时，我们并不需要对音乐进行左右均衡以及延时等设置，而且这些设置对某些声卡无效，我们在制作网页的时候只要将其省略系统将自动取其默认值，所以仅需要几个主要的参数就可以了。请看下面的代码：
<bgsound src="ok.wav" loop="2">
实例解析：
1、src="ok.wav" 是设置音频文件路径及名称，该标签还可以播放 .midi, .mp3, .wma格式的文件；
2、其中 loop="2" 是使背景音乐连续播放两次， loop="-1" 是设置无限循环播放。
(二) 使用 <embed> 标签播放音频及视频文件
本标签为双标签需要以 </embed> 结尾，该标签还可以在页面上生成一个播放控制面板，该面板提供了调整音量及暂停播放等功能。其播放的文件类型有 flash动画(扩展名为 swf);音频视频文件（扩展名为 mp3、wma、wav、mid、avi、rm、ram等）。其最简单写法是 <embed src="文件名" loop="1"></embed> 这样其他各属性将取默认值,下面介绍几个较常用的属性:
1、src=文件地址和名称；
2、width=播放面板宽度， height=播放面板高度，取自然数，也可以省略；
3、autostart=true或者false，决定音乐文件下载完毕后是否自动播放，默认为false。对于flash动画无效；
4、loop=“循环播放次数”；
5、hidden=true或者false，决定是否隐藏播放面板，true为隐藏；
6、quality=设定播放质量，low（播放质量最差）、medium（播放中等质量）、high（播放高质量，默认）、best（播放极高质量）；
以上这两个标签的区别在于 <bgsound> 只能播放音频文件,而且没有播放面板,页面最小化时将停止播放正在播放的文件; <embed> 标签则可以播放音频和视频文件,而且有播放面板,最小化页面时仍然继续播放正在播放的文件。
|
