在阅读粉小妞Holly的《Axure教程:商品图片放大效果制作步骤详解(简版)》文章后,发现跟自己的Axure8.0版本不一样,因此,根据教程及本人理解后,给读者补交另外一篇教程;在此,感谢粉小妞Holly作者的分享。
效果如下:
一、页面布局
(1)拉入一张大小为400400和800800的照片;分别命名为小图和大图,并将大图转为动态面板,命名为放大窗口,大小设置为400*400。
(2)再拉入一个矩形,背景色填充为粉红色,20%的透明度,大小为200*200,并命名为放大镜,如下图所示:
二、设置全局变量
不选中页面任何元素,添加【页面载入时】事件,利用全局变量来控制大图的实际应该移动距离,即通过大图的宽度除以小图的宽度,得到放大的倍数。此全局变量在后面的移动距离计算公式中需要用到,设置如下图所示: