Axure教程：淘宝商品图片放大效果

在阅读粉小妞Holly的《Axure教程：商品图片放大效果制作步骤详解（简版）》文章后，发现跟自己的Axure8.0版本不一样，因此，根据教程及本人理解后，给读者补交另外一篇教程；在此，感谢粉小妞Holly作者的分享。

效果如下：

一、页面布局

（1）拉入一张大小为400*400和800*800的照片；分别命名为小图和大图，并将大图转为动态面板，命名为放大窗口，大小设置为400*400。

（2）再拉入一个矩形，背景色填充为粉红色，20%的透明度，大小为200*200，并命名为放大镜，如下图所示：

二、设置全局变量

不选中页面任何元素，添加【页面载入时】事件，利用全局变量来控制大图的实际应该移动距离，即通过大图的宽度除以小图的宽度，得到放大的倍数。此全局变量在后面的移动距离计算公式中需要用到，设置如下图所示：

三、添加交互

选中【小图】，添加【鼠标移动时】交互效果。

（1）设置显示效果

元件》显示》勾选放大镜和放大窗口，设置为显示，如下图所示：

（2）设置移动效果

当鼠标移入到小图时，放大镜矩形的中心点需要立即跟随移动到鼠标位置，因此，设置交互事件如下：

1）元件》移动》勾选【放大镜】矩形，移动为：绝对位置，X轴为：[[Cursor.x-Target.width/2]]，即鼠标的x轴减去放大镜的一半宽度；Y轴为：[[Cursor.y-Target.width/2]]，即鼠标的Y轴减去放大镜的一半宽度。

如下图所示：

2）添加边界，顶部为：>=[[LVAR1.top]]，点击【fx】,添加局部变量，如下图所示：

同理，底部为：<=[[LVAR1.bottom]]；左侧为：>=[[LVAR1.left]]；右侧为：<=[[LVAR1.right]]。

接下来则设置放大窗口中的大图移动效果：

3）元件》移动》勾选【大图】矩形，移动为：绝对位置，X轴为：[[(LVAR1.x-LVAR2.x)*OnLoadVariable]]，即小图的x轴减去放大镜的x轴得到的距离，再乘以放大倍数（前面设置的全局变量）；Y轴为：[[(LVAR1.y-LVAR2.y)*OnLoadVariable]]，即小图的y轴减去放大镜的y轴得到的距离，再乘以放大倍数。

如下图所示：