一、简单的图像翻滚
image-rollover常被用在交互式导航栏上，当我们的鼠标移动到导航栏时，按钮的外观改变。例如我们以如下几幅黑白缩略图作为导航图表，当鼠标移动到指定图标时，图标变为明亮的彩色图片。预览如下：
该页面的代码十分简单，我们以此为例逐步实现图像的翻滚：
img-rollover.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Rollover Images</title> <style> html , body{ line-height: 1; background-color: #334873; } h1 { font-family: 'ColaborateRegular', Arial, sans-serif; } p { font-family: 'ColaborateRegular', Arial, sans-serif; color: white; } .logo { letter-spacing: -1px; color: rgb(195,151,51); text-shadow: 2px 2px 1px rgba(0,0,0,.25); font: normal 54px 'ColaborateThinRegular', Arial, sans-serif; } #gallery img { display: inline-block; margin: 10px; border: 1px solid rgb(0,0,0); } </style> <script src="https://www.jb51.net/js/jquery-1.7.2.min.js"></script> <script> $(ducument).ready( );//end ready </script> </head> <body> <div> <div> <p>Easy Sir</p> </div> <div> <div> <h1>Rollover Images</h1> <p>Mouse over the images below</p> <div> <a href="https://www.jb51.net/images/blue.jpg"><img src="https://www.jb51.net/images/blue.jpg" alt="blue"> </a> <a href="https://www.jb51.net/images/green.jpg"><img src="https://www.jb51.net/images/green.jpg" alt="green"> </a> <a href="https://www.jb51.net/images/orange.jpg"><img src="https://www.jb51.net/images/orange.jpg" alt="orange"> </a> <a href="https://www.jb51.net/images/purple.jpg"><img src="https://www.jb51.net/images/purple.jpg" alt="purple"> </a> <a href="https://www.jb51.net/images/red.jpg"><img src="https://www.jb51.net/images/red.jpg" alt="red"> </a> <a href="https://www.jb51.net/images/yellow.jpg"><img src="https://www.jb51.net/images/yellow.jpg" alt="yellow"></a> </div> </div> </div> </div> </body> </html>
这段代码十分简单。主要就是包含一个Logo部分，一个标题和6个<a>链接。中间我们省略了38行中的jQuery代码部分，下面我们逐步在其中添加代码实现图像翻滚的效果。
1、改变图像的src属性
我们知道显示在Web页面的每一个图像都有一个src属性，该属性表示文件的路径，它指向服务器上的一幅图片。如果我们更改了该属性的值，浏览器将会显示新的图片。对于以上代码，我们首先可以通过each()函数获取所有img元素的遍历，在对应位置添加如下代码：
<script> $(document).ready(function(){ $('#gallery img').each(); });//end ready </script>
我们可以通过jQuery的arrt()方法来获取img的src属性。然后，我们将以上img的src属性值替换为新图片的路径，方法如下：
<script> $(document).ready(function(){ $('#gallery img').each(function(){ var oldSrc = $(this).attr('src'); var newPic = new Image(); var imgExt = /(\.\w{3,4}$)/; newPic.src = oldSrc.replace(imgExt, '_h$1'); }); });//end ready </script>
后面的图像预载入中会有这段代码的简单分析，这里首先复习一下，attr()函数允许读取一个标签的指定html属性值，如上例中传入的'src'参数即读取图片的src属性。如果给attr()方法传入第二个参数，则可以重设该属性的值。比如：
$('#pic1').attr('src', 'images/newImg.jpg');
另外，attr()函数也允许我们一次修改多个HTML属性值。比如，当我们需要载入的newImg和oldImg尺寸不符的时候，为了避免新图片的扭曲，我们可以同时更改img元素的宽、高属性。方法如下，传入一个对象直接量作为参数：
var newImg = new Image(); newImg.src = 'images/newImage.jpg'; $('#pic1').attr({ src: newImg.src, width: newImg.width, height: newImg.height });
2、图像预载入
如果我们不加”心机”地在鼠标移动到指定图片时改变图像的src属性来实现image-rollover，会有一个小问题。当我们把鼠标移动到指定图标上时，该图像的src属性被改变，此时浏览器会去新的src路径下载资源图片，现场下载图片往往会给用户一个明显的延迟感。为了克服这个恼人的问题，我们可以预先将图片下载到浏览器的缓存中。
实际上，在代码2中，我们便实现了图片的预载入。代码2中的第4行，首先获取每幅图片的src属性；第5行创建一个新图像；第6~7行，使用正则表达式，在旧图像src末尾添加_h后赋给新创建图像的src。例如旧图片src为'https://www.jb51.net/images/blue.jpg'，将'images/blue_h.jpg'赋给新创建的newPic的src属性。