在本教程中,我们将为一系列图像添加翻滚效果(如图7-1所示)。我们将添加程序来预载入翻滚图像,从而消除鼠标光标移动到图像上和看到翻滚图像之间的任何延迟。此外,我们将学习一种新技术,来使得预载入和添加翻滚效果的过程更高效。
教程文件rollover.html(位于教程目录chapter07下)包含了一组6幅图像(如图7-2所示)。每幅图像包含一个链接,该链接指向了图像的一个较大的版本,并且所有的图像都包含在一个ID为gallery的<div>标签中。基本上,我们要试图做到两件事情:
·预载入和<div>中的每幅图像相关的翻滚图像。
·给<div>中的每幅图像添加一个hover()函数。当鼠标光标移动到图像上的时候,hover()函数交换翻滚图像,当鼠标从图像上移开的时候,交换回最初的图像。
根据上面的介绍,我们可以看到两个步骤都和<div>中的图像有关,因此,解决这个问题的方法之一是,首先选择<div>中的图像,然后遍历选择,预载入每幅图像的翻滚,并且附加一个hover()函数。
注意:参见1.3节中的“注意”部分,了解如何下载教程文件的相关信息。