[javascript]Reflection.js

Reflection.js

名称:Reflection.js
版本: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格式的属性,包括heightopacity,他们的值均为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会不会这样,具体原因就不深究了……

此条目发表在 网站前端 分类目录,贴了 , 标签。将固定链接加入收藏夹。

发表评论