7.2 教程:添加翻滚图像

在本教程中,我们将为一系列图像添加翻滚效果(如图7-1所示)。我们将添加程序来预载入翻滚图像,从而消除鼠标光标移动到图像上和看到翻滚图像之间的任何延迟。此外,我们将学习一种新技术,来使得预载入和添加翻滚效果的过程更高效。

图 7-1 通过翻滚使得一个导航栏、链接或一幅简单的图像更具有视觉交互性

7.2.1 任务概览

教程文件rollover.html(位于教程目录chapter07下)包含了一组6幅图像(如图7-2所示)。每幅图像包含一个链接,该链接指向了图像的一个较大的版本,并且所有的图像都包含在一个ID为gallery的<div>标签中。基本上,我们要试图做到两件事情:

·预载入和<div>中的每幅图像相关的翻滚图像。

·给<div>中的每幅图像添加一个hover()函数。当鼠标光标移动到图像上的时候,hover()函数交换翻滚图像,当鼠标从图像上移开的时候,交换回最初的图像。

根据上面的介绍,我们可以看到两个步骤都和<div>中的图像有关,因此,解决这个问题的方法之一是,首先选择<div>中的图像,然后遍历选择,预载入每幅图像的翻滚,并且附加一个hover()函数。

图 7-2 这个教程的HTML的基本结构包含了一个<div>标签,该标签包含了一系列的链接,链接中带有图像。为了使得交换新图像更容易,新图像的文件名只是最初的图像文件名的一个版本

注意:参见1.3节中的“注意”部分,了解如何下载教程文件的相关信息。