JavaScript to achieve image reflection effect-reflex.js_jsp programming

JavaScript to the image of the use of reflection effect is very simple, give you need to add reflection effect of the picture plus class= "reflect", the need for small partners can refer to.

Current version: Reflex.js 1.5

Applicable mainstream browsers: Mozilla Firefox 1.5+, Opera 9+, Safari and ie6+

Principle: To repaint the picture through canvas, display the reflection effect

The use method is simple:

First of course to quote this JS:

<script type= "Text/javascript" src= "Reflex.js" ></script>

You can then add the initialization class reflex to the corresponding IMG tag class name.

We'll show you only three pictures of the application initialization class:

<div class= "Demo" ></div> <div
Class= "Demo" ></div> <div class="
Demo "></div>

The effect is as follows:

This script uses CSS classes to control the reflection, and the class attribute is briefly described as follows:

• Idistance: Sets the pixel height of the reflection-min=0 max=100 default=0
• Iheight: Set the percentage height of the reflection-min=10 max=100 default=33
• Iopacity: Set the transparency of the reflection-min=0 max=100 default=33
• Iborder: Sets the pixel width of the border-min=0 max=100 default=0
• Icolor: Set the color of the border-min=000000 max=ffffff default=f0f4ff
• "Itiltright" or "Itiltnone" or "Itiltleft": Sets the direction of the picture, which is the right, constant, and left.

We're trying to change the transparency:

<div class= "Demo" ><a href= "img/album.jpg" ></a></div>
<div class=" demo "><a href=" Img/album.jpg "></a></div> <div class=
" Demo "><a href=" img/album.jpg "><" /a></div>

The effect is as follows:

Then we change the other classes:

<div class= "Demo" >
<div class= "demo" ></div> <div class=
"demo" ></div>"

The effect is as follows:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.