JavaScript实现图片倒影效果reflex.js

Java脚本语言给图片加倒影效果用法很简单，给你需要加倒影效果的图片加上class='reflect '，有需要的小伙伴可以参考下。

目前版本： reflex.js 1.5

适用的主流浏览器：Mozilla Firefox 1.5、Opera 9、Safari和IE6

原理：通过帆布重画图片，显示倒影效果

使用方法很简单：

首先当然要引用这个js:

脚本类型=' text/JavaScript ' src=' http : reflex。js /脚本然后把初始化类反射的添加到对应的img标签类名里就可以了。

img src=' http : img/相册。jpg ' width=' 200 ' class=' reflex ' alt=' '/我们先只显示三张应用初始化类的图片：

div class=' demo ' img src=' http : img/相册。jpg ' width=' 200 ' class=' reflex ' alt=' '//div class=' demo ' img src=' http : img/album。jpg ' width=' 200 ' class=' reflex ' alt=' '//div class=' demo ' img src=' http 3360 img/相册。jpg ' width=' 200 ' class=' reflex ' alt='效果如下：

这个脚本使用半铸钢钢性铸铁(铸造半钢)类来控制倒影，支持班级属性简单介绍如下：

我立场：设置倒影的像素高度-最小值=0最大值=100默认值=0 ih8g:设置倒影的百分比高度-最小值=10最大值=100默认值=33 IOPs能力：设置倒影的透明度-最小值=0最大值=100默认值=33订单：设置边框的像素宽度-最小值=0最大值=100默认值=0 icolor:设置边框的颜色-最小值=000000最大值=ffffff默认值=f0f 4 ff ' itiltright '或' itiltnone '或itiltleft ':设置图片的方向，依此是右边、不变、左边。我们试着改下透明度：

div class=' demo ' a href=' img/专辑。jpg ' img src=' http : img/相册。jpg ' width=' 200 ' class=' reflex iopacity50 ' alt=' '//a/div div class=' demo ' a href=' img/album。jpg ' img src=' http : img/相册。jpg ' width=' 200 ' class=' reflex iopacity75 ' alt=' '//a/div效果如下：

然后我们改下其他的类：

div class=' demo ' img src=' http : img/相册。jpg ' width=' 200 ' class=' refleidistance 16 iborder 2 ih八十八24 ' alt=' '//div class=' demo ' img src=' http : img/相册。jpg ' width=' 200 ' class=' refleidistance 0 iborder 8 ih八十八40 icolorffffffff ' alt=' '//div class=' demo ' img src=' https效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。