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="mm1.jpg" class="reflect" />

   然后就可以实现图片的投影效果了。

需要说明的：

1. 无兼容性问题（IE7，IE8通过私有滤镜做了兼容处理）；
2. 此js对图片<img>外部又重新写入了一个<div>，如果需要多图排列，则需要对此<div>标签进行控制。在本实例里，我已经给这个<div>添加了className——"zxx_add_class"；您只需要控制此className就能控制图片的位置排列等。

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

您可以狠狠地点击这里：基于canvas的投影效果演示页面（附打包下载）

二、快速收尾

本结尾从2016年穿越而来。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： http://www.zhangxinxu.com/wordpress/?p=74

（本篇完）