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
（本篇完）
相关文章
- “更多|收起”交互中渐进使用transition动画 (0.389)
- jQuery-单击文字或图片内容放大显示效果插件 (0.303)
- 小卖弄：纯CSS实现图片滚动播放效果 (0.178)
- 关于Google圆角高光高宽自适应按钮及其拓展 (0.161)
- 图层转CSS3 photoshop扩展CSS3Ps插件简介 (0.155)
- -webkit-box-reflect属性简介及元素镜像倒影实现 (0.155)
- jQuery-实现图片的放大镜显示效果 (0.142)
- jQuery图片文本滚动切换插件jCarousel中文翻译与详解 (0.142)
- jQuery Lightbox(balupton版)图片展示插件讲解 (0.142)
- 纯js无图片无外链CSS图片幻灯片播放插件 (0.142)
- CSS样式分离之再分离 (RANDOM - 0.005)