不要不相信自己的眼睛,从看到这个效果的第一眼起,你肯定会喜欢上它。
cu3er是一个基于Flash的3D图片幻灯片特效。它不同与其它的图片幻灯片就是在切换的时候很有立体感,超酷的3D效果!
先看看它的Demo:
不要不相信自己的眼睛,从看到这个效果的第一眼起,你肯定会喜欢上它。
cu3er的使用也很简单,我们来看看如何自己DIY。
先去官网下载cu3er的最新版本,cu3er的下载地址。
解压下载的压缩包,在压缩包的根目录下有个核心配置文件config.xml,这里简单得说说xml中标签的含义:
05 |
<url>images/slide_1.jpg</url> |
10 |
<url>images/slide_2.jpg</url> |
14 |
<url>images/slide_3.jpg</url> |
<slide>标签中就包含了幻灯片的图片地址,你可以修改成自己想要的地址。更多的细节参数的设置就包含在另一个标签<settings>中。
03 |
<defaults round_corners= "5,5,5,5" > |
04 |
<tweenover tint= "0xFFFFFF" scalex= "1.1" scaley= "1.1" > |
05 |
<tweenout tint= "0x000000" > |
06 |
</tweenout></tweenover></defaults></prev_button> |
08 |
<tweenover tint= "0x000000" > |
09 |
</tweenover></prev_symbol> |
12 |
<defaults round_corners= "5,5,5,5" > |
13 |
<tweenover tint= "0xFFFFFF" scalex= "1.1" scaley= "1.1" > |
14 |
<tweenout tint= "0x000000" > |
15 |
</tweenout></tweenover></defaults></next_button> |
18 |
<tweenover tint= "0x000000" > |
19 |
</tweenover></next_symbol> |
<settings>标签中的标签含义说明:
<prev_button> 后退按钮
<prev_symbol> 后退按钮中的箭头
<next_button> 前进按钮
<next_symbol> 前进按钮中的箭头
<tweenOver tint=”0xFFFFFF” scaleX=”1.1″ scaleY=”1.1″/>是指当鼠标移悬停在前进后退按钮时,按钮样式变大1.1倍,并改变按钮的背景颜色为ffffff(白色)这个颜色,这就类似于CSS中的:hover伪类。
官方下载的源文件默认是不能自动播放的,如果要自动播放还要在config.xml配置文件中加一段代码:
2 |
<defaults symbol= "circular" time= "3" ></defaults><!-- 设置自动播放的方式和时间 --> |
3 |
<tweenin x= "500" y= "50" width= "35" height= "35" tint= "0xFFFFFF" ></tweenin> |
如果你需要更详细的参数说明就要去看看官方的说明文档。