JavaScript 动态网页实例 —

图像是网页设计中必不可少的内容之一，而图像的显示方式更是关系到网站的第一印象。本章介绍图像的显示，主要包括:图片的随机显示、图像的显示和隐藏、图像的滚动显示、图像的探照灯扫描显示、多幅图像的翻页显示、图像的水纹效果显示、全景图效果显示手电照射效果显示以及雷达扫描效果显示等。在这些显示效果中，应用了很多CSS的内容读者需要对CSS和JavaScript对CSS的处理有一定了解。

图片的随机显示

本节给出一段图片随机显示的示例代码。页面出现一幅图像，不断刷新页面，则页面中的图像不断变化。

要点

本节代码主要使用了Math对象的random()方法和round()方法，主要功能和用法如下。

Math 对象用于进行属性运算。其属性是数学中一些常见的常数值。
在 Math 对象的方法中，除random()外的所有方法都需要一个或几个参数。典型的是三角函数在作为一个参数的值上进行操作，其他参数决定传递的参数中哪一个是最大值或最小值。random()方法没有参数，返回0~1之间的随机浮点数。
Math 对象的 foor(n)返回一个小于或等于n的整数。
Math.random()方法返回0~1之间的随机浮点数，假如要设计一个掷骰子的游戏，需要生成1~6之间的随机数。如果要生成0和上限之间的随机数，可使用“Math.floor(Mathrandom()*n)”格式，其中n表示上限。
若要生成不同范围的随机数，使用“Math.floor(Math.random()*n)+m”格式，其中m是下限，n是上限。
Math 对象的round(n)方法返回n的四舍五入值。

<script language="JavaScript">
<!--
a = 3 //要显示的图片的数量
var pp = Math.random();  //产生一个随机数
var foot = Math.round(pp * (a-1))+1; //由随机数产生要选择的图片的序号
function create() 
{ //自定义3个属性
this.src = ''
this.border = ''
this.alt = ''	
}
b = new Array()
for(var i=1; i<=a; i++)
{
b[i] = new create()
}  //创建3个数组
//分别定义每个图片的相关属性
b[1].src    = "图片的随机显示.1.gif"
b[1].border = "0"
b[1].alt    = ""
b[2].src    = "图片的随机显示.2.gif"
b[2].border = "0"
b[2].alt    = ""
b[3].src    = "图片的随机显示.3.gif"
b[3].border = "0"
b[3].alt    = ""
var pic = "";  //定义一个变量，存储要显示的图片的相关显示属性
pic += '<img width=222 src='+b[foot].src+' border="0"'+' alt='+b[foot].alt+'>';
document.write(pic) //将图片显示出来
//-->
</script>

分析

(1)程序首先使用“Math.random()”产生一个随机数，并将其存储在变量pp中，然后，使用“Math.round(pp*(a-1))+1”产生一个1到图片数量之间的随机数，并将其存储在变量 foot 中。
(2)函数 create()用于定义图像的3个属性:src、border 和 alt。
(3)随后，使用一个for 循环，定义了a个(a为图像个数)数组对象。然后，分别定义每个数组对象的src属性、border属性和alt属性。
(4)最后，使用一个 pic 变量将要显示的图像的属性连接起来，并使用document.write()方法将 pic 输出到页面上。

图像显隐

本节给出一段图像显示和隐藏的示例代码，程序中出现一幅图像，不断刷新页面，页面中的图像不断显隐交替变化。

要点

本节代码主要使用了 setTimeout()方法、clearTimeout()方法、innerHtml属性、length属性和CSS滤镜的alpha属性，主要功能和用法如下。

Window对象支持一些设置计时器的方法,用于执行特定函数。这些方法包括setTimeout()和 clearTimeout( )。
setTimeout()方法的功能是设置一个超时，以便在将来的某个时间触发某段代码的运行。基本语法是“timerld=setTimeout(要执行的代码,以毫秒为单位的时间);”。其中，“要执行的代码”可以是一个函数，也可以是其他 JavaScript语句;“以毫秒为单位的时间”指代码执行前需要等待的时间，即超时的时间。
可以在超时事件未执行前中止该超时设置，使用Window对象的 clearTimeout()方法来实现。其语法为“clearTimeout(timerld)”。
不管是由构造函数 Amay()创建的数组，还是由数组直接量创建的数组，都有一个特殊的属性 length，用于说明这个数组包含的元素个数。由于数组可能包含未定义的元素所以属性 length 总是比数组最多元素的个数大1.和常规对象的属性不同,数组的 length属性总是自动更新的，以便在给数组添加新元素时能够保持更新。
在JavaScript中，字符串是一组被引号(单引号或双引号)括起来的文本。例如,“varstringl="This is astring";”和“var string2='So am!,;”分别定义了两个字符串 string!和 string2。
还可以使用 length()方法求出字符串的长度。例如对上述已定义的myName 字符串，可用“var strlen=myName.length();”求出其长度，得到的结果为 6。
Netscape 6+、Opera 7+以及【E 4+ 都支持非标准的 innerHTML 属性，该属性允许对HTML元素内容的简单读取和修改。
在IE中，还支持innerText、outerText、outerHTML属性,innerText与innerHTML类似,只是用 innerText设置的内容都被作为纯文本处理。因此，不会生成相应的 HTML 元素。outerText与 outerHTML属性，分别和相对的 Inner 属性相似，只是这两个属性还对元素本身进行修改。
alpha属性的 opacity 为可选项，用于设置或检索透明渐变的开始透明度。是一个取值范围为0~100的整数值，默认值为0，即完全透明，100为完全不透明。
alpha 属性的 finishOpacity 为可选项，用于设置或检索透明渐变的结束透明度。是一个取值范围为0~100的整数值。默认值为0，即完全透明，100为完全不透明。

<script language=javaScript>
<!--

var i_strngth=1
var i_image=0
var imageurl = new Array()
//Ҫϔʾµĳ·ùͼƬ
imageurl[0] ="图像显隐.1.jpg"
imageurl[1] ="图像显隐.2.jpg"
imageurl[2] ="图像显隐.3.jpg"
function showimage()
{ 
if(document.all) 
{
if (i_strngth <=110) 
{
testimage.innerHTML="<img width=230 height=250 style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else 
{
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) 
{
clearTimeout(timer)
document.testimage.document.write("<img width=230 height=250 src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0} 
var timer=setTimeout("showimage()",2000)
} 
}
function hideimage() 
{ 
if (i_strngth >=-10) 
{
testimage.innerHTML="<img width=230 height=250 style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
} 
else 
{
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500) 
}
}
//-->
</script>

分析

(1)程序首先定义了一个名为imageurl的数组，其中存放要显示的图像。读者可根据实际情况进行增、减。
(2)函数showimage()的功能用于显示图像。其中，区分正和Netscape 浏览器，在IE中，将要显示图像的相关属性存储在testimage.innerHTML中进行显示输出;在Netscape中，则通过 document.testimage.document.write()方法将图像输出至页面。
(3)函数hideimage()的功能用于隐藏图像。将要显示隐藏的相关属性存储在testimage.innerHTML中，通过设置其alpha( )属性来对图像进行隐藏。

图像滚动显示

本节给出一段图像滚动显示的示例代码，页面出现两组图像，两组图像分别沿水平方向和垂直方向滚动显示。

要点

本节代码主要使用了setTimeout()方法、onmouseover事件与onmouseout事件、Math 对象的 foor(n)方法、sin(n)方法、cos(n)方法、ceil(n)方法、random()方法，以及和网页元素坐标位置及尺寸等应用，主要功能和用法如下。

Window对象支持一些设置计时器的方法,用于执行特定函数。这些方法包括setTimeout()和 clearTimeout( )。
setTimeout()方法的功能是设置一个超时，以便在将来的某个时间触发某段代码的运行。基本语法是“(immerId=setTimeout(要执行的代码,以毫秒为单位的时间);”。其中,“要执行的代码”可以是一个函数，也可以是其他JavaScript语句;“以毫秒为单位的时间”指代码执行前需要等待的时间，即超时时间。
可以在超时事件未执行前中止该超时设置，使用 Window 对象的 clearTimeout()方法来实现。其语法为“clearTimeout(timerld)”。
HTML 支持对绝大多数元素进行事件绑定，这些绑定通常作为元素的属性使用，例如onclick与 onouseover，可以使用等号与JavaScript 进行连接。当与之绑定的对象有事件发生时，就会执行相应的JavaScript代码。
onmouseover 事件，当鼠标移动过某个元素时被触发。可应用于大部分可显示元素，在正中还有<applet>、<font>，在Netscape Navigator 中还有<ilayer>、<layer>。
onmouseout事件，当鼠标移开某个元素(鼠标已不在元素上方)时被触发。可应用于大部分可显示元素，在E中还有<applet>、<font>，在Netscape Navigator 中还有<ilayer>、<layer>。
Math 对象用于进行属性运算。其属性是数学中一些常见的常数值。在Math 对象的方法中，除了 random()之外的所有方法都需要一个或几个参数。典型的是三角函数在作为一个参数的值上进行操作，其他参数决定传递的参数中哪一个是最大值或最小值。
Math.ceil(n)方法用于求大于或等于n的整数，参数n指定要进行运算的数值。与其对应的方法是 Math.floor(n)。
Math.random()方法返回0~1之间的随机浮点数，假如要设计一个掷骰子的游戏，需要生成1~6之间的随机数。如果要生成0和上限之间的随机数，可使用“Math.floor(Math.random()*n)”格式，其中n表示上限。
若要生成不同范围的随机数，使用“Math.floor(Math.random()*n)+m”格式，其中m是下限，n是上限。
Math.sin(n)方法和 Math.cos(n)方法用于产生n的正弦值和余弦值。其中的参数n为弧度值。
DOM 提供了各种类型的元素对象定位及尺寸属性，这些属性基本上只用于读取，而不可进行设置，使用时的语法规则是“网页元素对象.DOM属性名”。其中，属性名中包含“client”的宽度和高度表示真正能够显示网页内容的区域;属性名中包含“ofset”的宽度和高度表示包括了元素对象边线在内的所有区域;属性名中包含“scroll”的宽度和高度表示包含所有全部网页内容的区域。