这篇文章发布于 2009年12月25日,星期五,00:12,归类于 jQuery相关。 阅读 73704 次, 今日 3 次 6 条评论
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.369)
- jQuery-单击文字或图片内容放大显示效果插件 (0.312)
- 小卖弄:纯CSS实现图片滚动播放效果 (0.169)
- jQuery-实现图片的放大镜显示效果 (0.160)
- 纯js无图片无外链CSS图片幻灯片播放插件 (0.160)
- 关于Google圆角高光高宽自适应按钮及其拓展 (0.153)
- Apple iphone4官网图片“视网膜”放大效果实现 (0.148)
- 图层转CSS3 photoshop扩展CSS3Ps插件简介 (0.148)
- -webkit-box-reflect属性简介及元素镜像倒影实现 (0.148)
- jQuery图片文本滚动切换插件jCarousel中文翻译与详解 (0.135)
- CSS届的绘图板CSS Paint API简介 (RANDOM - 0.005)
有么有canvas 的好的效果 这个在做项目的时候产品不通过,还有旭哥哥 能不能下次写文章的时候 写点完善的项目实例呢?
不错地文章,贵站好多文章都很不错啊,经常来逛,这次留个脚印!
good!
少年,+个animate stop吧,不然稍微停歪了点会不停地变大变小
这个stop是怎么加啊
如果有google图片搜索里的那种效果就好了,这个的话通用性不好,具体情况还要自己进行修改,能插件化就好了。