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教程：上下滚动效果制作步骤详解》