原文：http://cow.neondragon.net/stuff/reflection/

Reflection.js能够在你的页面的图片上添加投影效果。它的javascript很简洁不会弄乱你的代码。

它能够运行在所有流行的浏览器运行——Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ 和 Safari.在老版本的浏览器中，用户将不会看到效果。最重要的是他只有5kb。

使用：

1.将reflection.js 和 prototype.js 包含到你的页面中：

<script src="reflection.js" type="text/javascript"></script>

2.要在图片上加入效果你只要在图片链接中加上class="reflect"即可 。

例：

<img class="reflect" alt="Example Image" src="example.jpg" />

3.自定义效果

默认情况下投影只有原图片的50%，投影的透明度也是50%。

1).改变高度：

你可以改变投影的长度通过在css中添加rheight

使投影长为原图片的33%:

class="reflect rheight33"

例：

技巧：对于很大的图片，小的投影长度比较好（10%）。

2).透明度：

你可以通过reflect ropacity 标签来获得你想要得透明效果

透明度为30%：

class="reflect ropacity30"

例：

你可以同时改变投影长和透明度，如，长为80%，透明度为40%：

class="reflect rheight80 ropacity40"

代码说明：

你可以通过简单的代码就可以更为灵活的使用reflections。例如，你可以通过用户的行为来改变投影的效果或者为reflections添加类似于Lightbox的效果：

Reflection.add(image, options);

通过使用javascript加入或修改投影效果。如果图片已经有投影效果了，改变透明度和投影长度参数，投影效果也会随之改变。

图片必须是图片元素。

透明度和高度必须在0和1之间。

添加投影：

Reflection.add(document.getElementById("ohboy"), { height: 3/4,   opacity: 2/3 }); 
Reflection.remove(image);

删除投影效果：

Reflection.remove(document.getElementById("orly")); 

Reflection.defaultHeight =   height;

Reflection.defaultOpacity = opacity;

更多预览：http://www.hotajax.org/download/prototype/testsuite.html

下载：http://www.hotajax.org/download/prototype/reflection.zip

Comments (0)

Show/Hide comments

Show/Hide comment form

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment