Reflection.js允许您向网页上的图像添加倒影。它使用简洁的JavaScript保持代码干净，提供了多个配置参数，可灵活控制倒影的显示效果。
它适用于所有主要浏览器
InternetExplor5.5+MozillaFifox1.5+SafariGoogleChromeOpera9+
在较旧的浏览器上，它将降级，并且您的访客不会注意到任何事情。最棒的是轻量级，压缩以后它不到5KB。
配置
下载Reflection.js并将其包含在您的网页中。
scripttype="text/javascript"src="flection.js"/script
使用它
要添加反射，只需向图像添加class="flect"。
imgsrc="mm1.jpg"class="flect"/
注意：
无兼容性问题（IE7，IE8通过私有滤镜做了兼容处理）；此js对图片img外部又重新写入了一个div，如果需要多图排列，则需要对此div标签进行控制。
倒影将自动淡入背景色。
如果您运行forum，则可以修改模板并将class=“flect”添加到头像HTML代码中以添加投影。
自定义思考
默认情况下，反射的高度为原始图像的50％。因此，具有反射的图像的高度将是原始图像高度的1.5倍。反射的默认不透明度为50％。
改变高度
您可以通过在CSS类列表中添加高度和所需的百分比高度来改变反射的高度。
要使用原始图像高度％的反射，请执行以下操作：
class="flectrheight"
提示：特别是对于较大的照片，小的反射效果很好（尝试10％）。
改变不透明度
您可以通过在CSS类列表中添加不透明度和所需的不透明度百分比来改变反射的不透明度。
要使用不透明度为0％的反射，请执行以下操作：
class="flectropacity0"
您可以结合使用这两个选项。要创建80％高度，40％不透明度反射，请使用：
class="flectrheight80ropacity40"
脚本思考
如果您需要大量的灵活性，请使用脚本化倒影。您可以使倒影响应用户操作（例如，将鼠标悬停在上方时更改倒影不透明度），也可以将倒影添加到脚本（例如Lightbox）中。
添加
Reflection.add(image,options);
使用JavaScript向图像添加或修改倒影。如果图像已经倒影，但是指定的不透明度或高度已更改，则倒影将相应更改。
image应该是图像元素。
选项可以包含不透明度或高度的值。两个值都应介于0和1之间。
Reflection.add(document.getElementById("ohboy"),{height:/4,opacity:/});
移除
Reflection.move(image);
消除图像的倒影。
Reflection.move(document.getElementById("orly"));
动态修改参数
Reflection.defaultHeight=height;Reflection.defaultOpacity=opacity;
更改倒影的默认高度和不透明度。两种设置的默认值为0.5。
已知的问题
动画图像的反射只能在InternetExplor中正常工作。如果您在IE中页面/div底部附近倒影图像，则可能会创建空白。
在线示例