reflection.js-实现图片投影倒影效果js插件

这篇文章发布于 2009年08月30日,星期日,15:50,归类于 JS实例。 阅读 66016 次, 今日 5 次 9 条评论

 

一、直奔主题

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

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就能控制图片的位置排列等。

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

投影效果js插件效果图

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

二、快速收尾

本结尾从2016年穿越而来。

(本篇完)

分享到:


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

  1. 少杰说道:

    张老师,那个女孩子的图片我见您用了100余次了,好奇她是谁

  2. 评论说道:

    呃,我都是用翻转加一层线性透明遮罩来实现的。
    本评论从2016年穿越而来

  3. 牛鬼说道:

    图不错

  4. leq说道:

    sorry 失误

  5. leq说道:

    还是有兼容问题的…… 搜狗 IE兼容模式,IE版本9.0,木有倒影,请教!

    • 安迪说道:

      上面说了 使用到了html5标签 canvas 你列举的浏览器应该是没有完全支持html5的原因

  6. declong说道:

    强大!~~支持下

  7. 羞涩的郎君说道:

    不错!~~支持下