by zhangxinxu from http://www.zhangxinxu.com

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

如果您使用过igoogle的话，可能注意到其“谷歌图片集锦”模块的底部图片都是有投影效果的。我截了张图，如下：

igoogle图片集锦模块图片投影效果截图

要实现这种图片投影效果，需要用到一个HTML5中使用的标签，canvas标签。

如果您对canvas标签不熟，没有关系，已经有人将这种投影效果写成了插件，您直接调用此js就可以实现投影效果了。

使用方法很简单：
1.调用此reflection.js；
2.需要投影的图片添加class——”reflect”；例如：<img src=”http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg” />
然后预览就可以实现图片的投影效果了。

需要说明的：
1、无兼容性问题；
2、此js对图片img外部又重新写入了一个div，如果需要多图排列，则需要对此div标签进行控制。在本实例里，我已经给这个div添加了class——”zxx_add_class”；您只需要控制此class就能控制图片的位置排列等。

以下是此插件实现的最终效果图：

效果演示页面（附打包下载）

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

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

（本篇完）

标签： canvas, HTML5, javascript, jQuery, js相关, 图片投影效果, 插件

这篇文章发布于 2009年08月30日，星期天，15:50，归类于 jquery实例。 阅读 1092 次, 今日 3 次 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。