Axure如何制作图片点击放大或缩小效果

我们在浏览商品网站时，经常能看到商品图片能够放大或缩小展示。在Axure中也能简单的实现这个效果，那么，Axure如何制作图片点击放大或缩小效果呢？本文就由小编带大家了解一下，一起来看看吧~

工具/原料

Axure版本:企业版8.0.0.3338

PC电脑：Windows 7

方法/步骤

1.打开Axure，准备素材【图片】、【放大器图标】、【缩小器图标】。其中，放大与缩小的图标在Axure8.0版本中有自带，如图

2.将【放大器图标】、【缩小器图标】分别放置于图片放大前与图片放大后的中心点，然后【设置隐藏】，如图

3.设置页面的【页面载入时】事件为：将默认变量OnLoadVariable值设置为0。如图

4.设置图片的【鼠标移入时】事件1为：如果变量OnLoadVariable值为0，则显示放大图标，隐藏缩小图标。如图

5.设置【放大器图标】的【鼠标单击时】事件为：将图片尺寸设置为当前大小默认尺寸的2倍大小，然后设置变量OnLoadVariable值为1。如图

6.增加设置图片的【鼠标移入时】事件2为：如果变量OnLoadVariable值为1，则显示缩小图标，隐藏放大图标。如图

7.设置【放小器图标】的【鼠标单击时】事件为：将图片尺寸设置为当前大小默认尺寸，，然后设置变量OnLoadVariable值为0。如图

8.完成设置后，预览结果，实现了图片点击放大或缩小效果。如图

总结：

1.打开Axure，准备素材【图片】、【放大器图标】、【缩小器图标】；

2.将【放大器图标】、【缩小器图标】分别放置于图片放大前与图片放大后的中心点，然后【设置隐藏】；

3.设置页面的【页面载入时】事件为：将默认变量OnLoadVariable值设置为0；

4.设置图片的【鼠标移入时】事件1为：如果变量OnLoadVariable值为0，则显示放大图标，隐藏缩小图标；

5.设置【放大器图标】的【鼠标单击时】事件为：将图片尺寸设置为当前大小默认尺寸的2倍大小，然后设置变量OnLoadVariable值为1；

6.增加设置图片的【鼠标移入时】事件2为：如果变量OnLoadVariable值为1，则显示缩小图标，隐藏放大图标；

7.设置【放小器图标】的【鼠标单击时】事件为：将图片尺寸设置为当前大小默认尺寸，，然后设置变量OnLoadVariable值为0；

8.完成设置后，预览结果，实现了图片点击放大或缩小效果。

注意事项

Tips:如果想要更好的效果，还可以设置放大缩小图标随着鼠标移动位置。