
版本:2.0
大小:4.93K
浏览器兼容性:Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+
官方网站:http://cow.neondragon.net/stuff/reflection/
用途:
Reflection.js是一个非侵入式的js库,它可以实现图片的倒影效果。
用法:
使用方法很简单,首先调用js,然后在需要使用这个效果的图片上以"class"作为类名。
效果如下:
你也可以指定背景颜色:
效果:
Reflection.js还提供两个参数供调用:透明度和倒影高度。
透明度,只需要在class增加一个表示透明度的样式名。例如如果想透明度为20%,则增加名字为"ropacity20"的样式名,其他如此类推:
高度,同样只需要在class里增加一个表示高度的样式名。例如如果想倒影的高度为图片的20%,则增加样式名:"rheight20":
另外,除了使用class属性外,还能使用"Reflection.add(image, options)"方法实现倒影这个效果,方法的参数分别为图片对象以及JSON格式的属性,包括height和opacity,他们的值均为0到1之间。
效果:
与Reflection.add对应的是Reflection.remove(image)方法,参数为图片对象。这个方法可以移除倒影效果:
Reflection.remove(document.getElementById("img"));
最后,你还能设定height跟opacity的默认值(均为0.5):
Reflection.defaultHeight = 0.6;
Reflection.defaultOpacity = 0.7;
已知问题:
1.当在动画图片上运用reflection效果时,只有在IE浏览器上才能正常工作。
2.当在一张靠近页面或者div底部的图片使用reflection效果时,将可能出现多余的空白。
下载:
你可以直接上官网进行下载,或者点击:Reflection.js v2.0。
P.S 在下载到底zip包里除了js本身,还有一些用法(readme.html)和demo(testsuite.html),其中在demo的那个html里,Scripted Reflection那个例子貌似在IE6下会有问题,会闪动得很厉害,不知道IE7会不会这样,具体原因就不深究了……