by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=474

类似于图片幻灯片的显示，比幻灯多了个缩略图放大预览的功能。鼠标悬停到缩略图上，图片会以动画的方式放大显示，外带柔化的投影效果，感觉蛮酷的。下面就是效果的截图：

您可以狠狠地点击这里：demo实例页面

原理简述：
1、放大显示的原理是绝对定位。默认时缩略图大小100*75，position为absolute，left为0，top为0；放大时图片大小为200*150，left为-50像素，top为-38像素，这样图片即居中显示。

2、放大效果的实现是使用了jQuery的animate自定义动画包装器方法。

3、投影背景的实现是通过添加一个class "hover"来实现。这个hover类的样式就是用来改变并定位投影效果背景图片的。具体参见demo或源文件。

需要说明的：
在前一篇文章IE6下z-index犯癫不起作用bug的初步研究 中提到，IE6和IE7下absolute层级显示是由其第一任relative属性的父标签决定的。所以，为了让每个放大显示的图片都是最顶层显示，在jQuery中增加了一段动态改变z-index的代码：

相关下载
您可以狠狠地点击这里：源文件下载(.zip 18.2K)

源文件中demo演示的图片为加工过的专门用来做实例演示的图片，都是4:3的尺寸，宽度有100像素，200像素，500像素3种型号。您可以批量下载到本地以方便测试学习。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=474

（本篇完）