15.2　图像特效

图像是文本的解释和说明，在网页中的适当位置放置一些图像，不仅可以使文本更加容易阅读，而且可以使网页更加具有吸引力。利用JavaScript可以制作各种各样的图像特效。

15.2.1　当鼠标指针经过图像时图像震动效果

下面制作当鼠标指针放在图像上的时候，图像出现震动的效果，具体操作步骤如下：

1　打开网页文档，在<head>与</head>之间输入以下代码。

image348_1

2　在震动图像的标记内输入以下代码。

image349_1

3　保存文档，在浏览器中预览效果，如图15.5所示。

image349_2

图15.5　图像震动效果

15.2.2　图片闪烁效果

制作图片闪烁效果主要是利用style.visibility属性来表示元素的可见性。制作图片闪烁效果的具体操作步骤如下：

1　打开网页文档，在<head>与</head>之间输入以下代码。

image349_3

2　将光标放置在<body>标记内，输入代码onLoad=”blink()”。

image03提示

代码onLoad=”blink()”的作用是当打开网页文档时加载闪烁函数blink()。

3　将光标放置在闪烁图片的前面输入代码<div id=”tp”>，在闪烁图片的后面输入代码</div>。

image03提示

输入代码<div id=”tp”>，的作用是给图片命名。

4　保存文档，在浏览器中预览效果，如图15.6所示。

image350_1

图15.6　闪烁图片效果

15.2.3　自动切换图像

利用图像数组可以实现自动切换图像效果，具体操作步骤如下：

1　打开网页文档，在<head>与</head>之间输入以下代码。

image350_2

2　将光标放置在<body>标记内，输入代码onload=slide()。

image03提示

代码onload=slide()的作用是当打开网页文档时加载函数slide()。

3　保存文档，在浏览器中预览效果，如图15.7所示。

image351_1

图15.7　自动切换图像