编者按:在前一篇文章中，作者展示了用Axure9拖动滑块确定得分区间的效果，“Axure9教程:拖动滑块确定得分区间效果”。在本文中，作者使用Axure9来显示缩放滑块控件图片的效果。让我们一起看看。

放大和缩小图片是网站上常见的效果。在前面的教程中，我们已经谈到了制作滑杆的方法。今天我们以网站中常见的头像编辑功能为例，用Axure9做一个滑块来滑动，控制图片的缩放效果。

一、相互作用效应的解释

拖动滑块，滑块可在灰色背景条的范围内滑动，并且图片随着滑块滑动的距离等比例放大缩小。在中间头像预览区域内可以拖动图片在一定范围内拖动，以便用户选取所需的头像部分。

二、组件准备

01

拖到一个名为“拖动区域”的动态面板中，并将大小调整为300 * 300像素，填充颜色为CCCCCC。

双击进入动态面板，拖入一个名为“pic”的[图片]组件。设置尺寸为300*150px，坐标为(0，75)。

02

只有中间的区域是头像效果的预览区域，所以我们可以拖拽四个填充颜色为ffffff、透明度为80%的【矩形】组件，放在“拖拽区域”的顶部作为遮罩。

03

拖动一个[圆形]组件，调整它的颜色和大小，右击它，变成一个名为“滑块”的动态面板。

拖动一个长度为300px的[矩形]组件，放在“滑块”的下层。选择此组件，右键单击“滑块”，将其转换为名为“滑块”的动态面板。

第三，添加互动效果

01

将[拖动时]的效果添加到动态面板的“拖动区域”。目标是图片“pic”。选择[跟随拖动]。

点击【更多选项】，添加【左侧:225】边界，顶部:225。

02

向滑块添加【拖动时】交互，移动滑块【水平拖动】，点击【更多选项】，添加边界【左≥0】【右≤330】。

03

在“滑块”【拖动时】的交互中继续添加【设置大小】的动作。目标是图片“pic”，宽度值为[[This.x*2+300]]，高度值为[[pic.width/2]]。

这里我们把图片的最大值设置为初始大小的3倍，即900*450px，我们可以得到一个方程，滑块的x坐标值/灰色背景条的总长度=图片的最大宽度-图片的当前宽度/图片宽度的最大变化值。

可以得出结论，画面的宽度总是[[This.x*2+300]]随滑随拖。

因为宽度总是两倍于高度，所以图片的高度是[[pic.width/2]]。