image-rollover常被用在交互式导航栏上，当我们的鼠标移动到导航栏时，按钮的外观改变。例如我们以如下几幅黑白缩略图作为导航图表，当鼠标移动到指定图标时，图标变为明亮的彩色图片。预览如下：
该页面的代码十分简单，我们以此为例逐步实现图像的翻滚：
img-rollover.html
Rollover Images <script src="js/jquery-1.7.2.min.js?1.1.23">《script》《script》$(ducument).ready();//end ready《script》
Easy Sir
Rollover Images
Mouse over the images below
接下来，我们通过jQuery为要显示的大图创建一个img标签，在代码3中添加如下代码：
...//省略未改动部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var newImg = $('
'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); });//end click
实际上，每当我们点击一个缩略图的时候，代码都会为我们创建一个新的img并添加到
中，从DOM的角度看，会不停地增加子节点：
为了实现”相册”翻阅的效果，我们在显示新的相片的时候同时要把之前的图片删掉。继续在代码5中作如下添加：
...//省略未改动部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $('#bigImg img'); var newImg = $('
'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ $(this).remove(); }); });//end click代码第6行首先获取当前存在的图像oldImg，在新的图片淡入的时候，此图应该进行淡出处理。11~13行，在新的图片淡入之后，oldImg淡出。同时给fadeOut函数传入一个回调函数，在oldImg淡出之后一并移除该图像的img标签。这样我们就保证在DOM树中
始终只有一个img节点，而不会无限地增长下去。接下来进行一些细节的调整，当我们点入这个页面的时候，希望默认显示第一幅图片，为了实现这个小功能，我们只需要在代码6后面添加一行代码：
...//省略未改动部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $('#bigImg img'); var newImg = $('
'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ $(this).remove(); }); });//end click $('#gallery a:first').click();我们在后面添加了$('#gallery a:first').click();，在jQuery中，如果没有给事件函数传递任何参数，jQuery便会触发一次该事件。保存代码，重新用浏览器打开，第一幅图片已经默认显示了：
3、css绝对定位实现图片的重叠
漂亮的相册集基本上已经完成了，但是吹毛求疵地看，当我们更换要查看的照片的时候，旧图片的淡出会在新图的后面完成，给人一种赘余不利落的感觉：
为了解决这个问题，我们让新图的淡入和旧图的淡出重叠显示。为了实现图片的重叠显示我们需要用到css的绝对定位。
通常情况下，在隐藏或者添加一个新的元素的时候，其他元素会像流一样自动移动来填补空白或者给新的元素腾位置。但是像我们本文的示例，如果我们不希望看到这样的效果，我们可以使用css的绝对定位。css的绝对定位会把一个元素放置在常规页面内容流之外，这样就不会在内容流中出现填补移动等操作了。如果我们使用绝对定位将元素定位在相同的位置，那么元素将会重叠在一起。本例中，这恰恰是我们想要的。实现起来其实十分简单，只需要在css中将
中的img指定为绝对定位就可以了。我们在代码1的前添加以下代码：#bigImg img { position: absolute;}保存，重新用浏览器打开，大功告成！漂亮的相册已经做好了。
jquery文件下载
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。
