查看: 2992|回复: 0

[最新动态] 幻灯片的使用方法

[复制链接]

4

主题

38

回帖

40

积分

版主

Rank: 7Rank: 7Rank: 7

积分
40
发表于 2015-11-16 18:36:08 | 显示全部楼层 |阅读模式
尹广磊公众帐号
这里所谓的幻灯片指的是在动画中可以通过滑动翻页显示一组图片的控件。

在介绍之前先看一下效果,如下面的演示动画1:

http://cn.mugeda.com/client/preview_css3.html?id=38f7372a



左右滑动图片,就能切换图片显示。

我们再来看是怎么制作的。

点击工具条中的幻灯片按钮后,在舞台上通过拖拽添加一个幻灯片(添加方式就像添加一个矩形一样),如图:



设置它的属性。首先给幻灯片添加图片,通过点击“图片列表”中的“+”按钮来添加图片:



然后设置“展示方向”为“左右翻页”,“显示方式”为“等比例包含”,“显示导航”为“是”。效果如上面的预览地址。

动画1编辑地址:http://cn.mugeda.com/animation/edit/38f7372a

然后我们再制作动画2来演示幻灯片属性不同设置的效果。前面步骤都是一样的,只在属性设置时,设置“展示方向”为“上下翻页”,“显示方式”为“等比例覆盖”,“显示导航”为“是”。



效果如图:



演示动画2预览地址:http://cn.mugeda.com/client/preview_css3.html?id=51309f65

演示动画2编辑地址:http://cn.mugeda.com/animation/edit/51309f65

再次制作动画3来演示幻灯片属性不同设置的效果。前面步骤都是一样的,只在属性设置时,设置“展示方向”为“左右翻页”,“显示方式”为“填充”,“显示导航”为“否”。



效果如图:



演示动画3预览地址:http://cn.mugeda.com/client/preview_css3.html?id=5b0a1ec7

演示动画3编辑地址:http://cn.mugeda.com/animation/edit/5b0a1ec7
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-5-4 13:25

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表