酷酷的jQuery鼠标悬停图片放大切换显示效果

这篇文章发布于 2009年12月25日,星期五,00:12,归类于 jQuery相关。 阅读 63425 次, 今日 9 次 6 条评论

 

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

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

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

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

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

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

一段改变z-index的代码

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

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

(本篇完)

分享到:1
×


发表评论(目前6 条评论)

  1. 西西说道:

    有么有canvas 的好的效果 这个在做项目的时候产品不通过,还有旭哥哥 能不能下次写文章的时候 写点完善的项目实例呢?

  2. 开心笑话说道:

    不错地文章,贵站好多文章都很不错啊,经常来逛,这次留个脚印!

  3. 七夜说道:

    少年,+个animate stop吧,不然稍微停歪了点会不停地变大变小

  4. 小柠檬说道:

    如果有google图片搜索里的那种效果就好了,这个的话通用性不好,具体情况还要自己进行修改,能插件化就好了。