超酷的Flash 3D图片幻灯片特效– cu3er

不要不相信自己的眼睛,从看到这个效果的第一眼起,你肯定会喜欢上它。

3D图片幻灯片

cu3er是一个基于Flash的3D图片幻灯片特效。它不同与其它的图片幻灯片就是在切换的时候很有立体感,超酷的3D效果!

先看看它的Demo:

不要不相信自己的眼睛,从看到这个效果的第一眼起,你肯定会喜欢上它。

3D图片幻灯片

cu3er的使用也很简单,我们来看看如何自己DIY。

先去官网下载cu3er的最新版本,cu3er的下载地址

解压下载的压缩包,在压缩包的根目录下有个核心配置文件config.xml,这里简单得说说xml中标签的含义:

01 <cu3er>
02  
03     <slides>
04         <slide>
05             <url>images/slide_1.jpg</url>
06             <!-- 幻灯片图片的地址 -->
07         </slide>
08  
09         <slide>
10             <url>images/slide_2.jpg</url>
11         </slide>
12  
13         <slide>
14             <url>images/slide_3.jpg</url>
15         </slide>
16     </slides>
17  
18 </cu3er>

<slide>标签中就包含了幻灯片的图片地址,你可以修改成自己想要的地址。更多的细节参数的设置就包含在另一个标签<settings>中。

01 <settings>
02 <prev_button>
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>
07 <prev_symbol>
08             <tweenover tint="0x000000">
09         </tweenover></prev_symbol>
10  
11         <next_button>
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>
16  
17         <next_symbol>
18             <tweenover tint="0x000000">
19         </tweenover></next_symbol> 
20  
21     </settings>

 
<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配置文件中加一段代码:

1 <auto_play>
2     <defaults symbol="circular" time="3"></defaults><!-- 设置自动播放的方式和时间 -->
3     <tweenin x="500" y="50" width="35" height="35"tint="0xFFFFFF"></tweenin>
4 </auto_play>

如果你需要更详细的参数说明就要去看看官方的说明文档

原文地址:https://www.cnblogs.com/Lotos/p/1888155.html