Axure教程:图片放大缩小制作步骤详解

以百度图片为例,用Axure实现图片放大缩小效果。

1、如何实现图片放大缩小效果:
(1)鼠标移入图片时,图片尺寸放大,并将图片置顶;
(2)鼠标移除图片时,图片恢复成原来的尺寸。

2、所需元件
图片6张(尺寸分别为:150170,2张;200170,2张;180*170,2张),如下图:

3、添加事件
(1)鼠标移入时,图片尺寸放大,并将图片置顶。

图片放大:选中图片1,添加【鼠标移入时】用例,添加【设置尺寸大小】,勾选图片1,设置长和宽,锚点为中心,动画为线性。如下图:

图片置顶:继续添加动作【置于顶层/底层】的【置于顶层】,勾选图片1,选择【置于顶层】,点击确定。如下图:

(2)鼠标移出时,图片恢复成原来的大小。

添加【鼠标移出时】用例,添加【设置尺寸】动作,勾选图片1,设置长宽为图片1原有的长宽(150*170),锚点为中心,点击确定。如下图:

将其他五张图片重复以上的操作。点击预览就可以查看效果了。

文件分享:http://pan.baidu.com/s/1o8OdluM 密码:7lj2

后续笔者会更新一系列Axure制作步骤详解。

欢迎关注微信公众号:Olga是肥婆。一起学习交流。

上一篇:《Axure教程:上下滚动效果制作步骤详解》

推荐阅读更多精彩内容