菜单

[JS]图片倒影效果

2010年07月7日 - javascript

(1)此js支持IE5.5+,Firefox1.5+,Opera9+,Safari等大部分浏览器,对于老版本的浏览器无任何影响。
(2)使 用简单方便。不需要其他程序的支持,外部调用js文件。然后在需要倒影效果的图片上添加:class=”reflect”即可。
(3)倒影自动渐 变至背景色,效果自然。可支持jpg,gif,png等图片格式。IE还支持gif动画。不支持链接图片。
(4)js文件小巧,只有4K不到。

下载reflection.js

Setting Up

Upload reflection.js and prototype.js and include them into your webpage.

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

Using It

To add a reflection just add a to the image. View source to see example.

Example Image

The reflection will automatically fade into the background colour.

If you run a forum, you can modify your templates and add class=”reflect” to the avatar HTML code to add reflections.

Customizing Reflections

By default, the reflection will have a height 50% of the original image. Thus the height of an image with a reflection will be 1.5 times the height of the original image. The default opacity of reflections is 50%.

You can combine these two options. To create a 80% height 40% opacity reflection use:

class="reflect rheight80 ropacity40"

Scripting Reflections

If you want tons of flexibility, use scripted reflections. You can make your reflections respond to user actions (e.g. changing the reflection opacity when the image is hovered over) or add reflections to scripts such as Lightbox.

Reflection.add(image, options);

Adds or modifies a reflection to an image using Javascript. If the image is already reflected but the specified opacity or height has changed, the reflection will be changed accordingly.

image should be an image element.

options can contain a value for opacity or height. Both values should be between 0 and 1.

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

Reflection.remove(image);

Removes the reflection from an image.

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

Reflection.defaultHeight = height;
Reflection.defaultOpacity = opacity;

Changes the default height and opacity of reflections. The default value for both settings is 0.5.

http://www.blueidea.com/articleimg/2006/05/3530/readme.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注