如果您使用过igoogle的话,可能注意到其“谷歌图片集锦”模块的底部图片都是有投影效果的。我截了张图,如下:
![igoogle图片集锦模块图片投影效果截图 igoogle图片集锦模块图片投影效果截图](https://i-blog.csdnimg.cn/blog_migrate/240667c02a726d4bd5501b70d0732ec6.jpeg)
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]