一个超酷的幻灯片:CU3ER

特效 July 17 2010 插件


演示地址:http://demo.yourtion.com/cu3er/

强大的3D展示功能确实跟以前所见的幻灯片不太一样,给人耳目一新的感觉。

这是在汕头大学的网站上面看到的。觉得那么多大学网站里面,汕大的网站还是很不错的,很大气!

因为从官方下载的源文件没有自动播放、幻灯图片链接等功能,所以我在这里就简单介绍一下使用方法。

CU3ER的使用十分简单,保证3分钟内你就可以学会了。

下载

到我的Dbank下载:cu3er-v0.9.2.zip

或者到 http://www.progressivered.com/cu3er/download/ 猛击那个红色的大按钮,下载源文件。

配置

配置上最核心就是config.xml这个文件了,接下来介绍一下大致标签的含义:

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
	<slides>
		<slide>
			<url>images/slide_1.jpg</url>
		</slide>
		<slide>
			<url>images/slide_2.jpg</url>
		</slide>
		<slide>
			<url>images/slide_3.jpg</url>
		</slide>
	</slides>
</cu3er>

很简单,每一张图片都是包含在标签之中的,你可以把图片地址修改为你要的图片。

给幻灯片的每张图加上链接:

只需要在<url></url>下加上<link></link>,例如http://yourtion.com</link>。

需要注意的是,下载下来直接改,然后直接运行demo是无效的,必须要上传到服务器或在本地的站点上运行才可以。还有,默认的打开方式是新窗口打开,可以通过<link target=”_blank">来控制打开方式。

加入标题和描述:

<description>
	<link></link>
	<heading></heading>
	<paragraph></paragraph>
</description>

说明一下,heading就是标题,paragraph就是描述。还有就是标题的链接了。

修改好图片之后,就是“前进,后退“按钮了

这些配置全部包含在<settings>标签以内的:

<settings>
	<prev_button>
		<defaults round_corners="5,5,5,5"/>
		<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
		<tweenOut tint="0x000000" />
	</prev_button>

	<prev_symbol>
		<tweenOver tint="0x000000" />
	</prev_symbol>

	<next_button>
		<defaults round_corners="5,5,5,5"/>
		<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
		<tweenOut tint="0x000000" />
	</next_button>

	<next_symbol>
		<tweenOver tint="0x000000" />
	</next_symbol>
</settings>

<prev_button>代表后退按钮, <prev_symbol>代表后退按钮的“箭头”。前进按钮与箭头同上。 <tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>是指当鼠标移上(mouseover)前进后退按钮时,按钮样式变大1.1倍,并变为ffffff这个颜色。

幻灯片自动播放,需要在里加入以下代码:

<auto_play>
	<defaults symbol="circular" time="3" />
	<tweenIn x="500" y="50" width="35" height="35" tint="0xFFFFFF" />
</auto_play>

更多的功能和详细的解析可以看官方的文档:http://www.progressivered.com/cu3er/docs/

原文链接:https://blog.yourtion.com/super-cool-slide-show-cu3er.html


欢迎来到郭宇翔的博客

打酱油专业户,喜欢各种折腾!

Follow @yourtion on GitHub

推荐内容