青铜修炼手册：Axure图片放大器

步骤：

1.拖放一张300*200的图片并命名为“小图”。

2.拖放一个150*100的矩形（黄底黄边），并设置【不透明度】为30%，初始状态设为【隐藏】，命名为“放大镜”，放置在“小图”的右下角

3.拖放一个300*200的动态面板，初始状态设为【隐藏】，命名为“放大窗口”，放置在小图右边，并在面板状态中放置一张600*400的图片，命名为“大图”

4.添加页面载入时用例

（1）新增一个全局变量，取名为“”

（2）在用例中设置全局变量“”为大小图宽度比例，即【大图宽度/小图宽度】

5.为“放大镜”添加鼠标移动时的用例

（1）绝对移动“放大器”，x轴移动到【鼠标的x坐标-“放大镜”宽度的一半】，y轴移动到【鼠标的y坐标-“放大镜”高度的一半】，并且左侧、右侧、顶部和底部的边界分别为“小图”的左侧、右侧、顶部和底部。

（2）绝对移动“大图”，x轴移动到【（“小图”左侧-“放大镜”左侧）*】，y轴移动到【（“小图”顶部-“放大镜”顶部）*】。

6.为“小图”添加鼠标移动时用例：该用例与“放大镜”的鼠标移动时用例一样，直接复制粘贴过来就行了

7.为“小图”添加鼠标移入时用例

（1）显示“放大镜”

（2）显示“放大窗口”

8.完成，点击浏览一下

原型查看效果地址：

原型RP文件下载地址：

想了解更多Axure资讯，赶快下方扫码加入【Axure修炼手册】微信公众号吧！！！