我们在逛 *** 可能小红书等电商平台的时候，当我们鼠标逗留在商品大图时会呈现一个预览区域，而且右侧会呈现预览区域的放大图片，利便我们看清商品的细节。这个就是电商平台图片放大预览的结果。本日我们就一起来进修一下吧～

01 前期筹备

软件：Axure 9.0

硬件：Windows/Mac电脑

思考：实现图片放大预览结果前的思考（可参考下图）

02 教程

（1）筹备素材，本文以 *** 网为例，筹备3张展示图片，左侧边距配置50，并配置图片尺寸为500*500，左下角小图片为3张图片的缩小版尺寸150*150，详细部署页面如下图

（2）将左侧3张大图转化为动态面板定名为“左面板1”，并配置3个状态，每张状态里放一张图片，图片顺序要与左下角小图顺序一致。详细如下图

（3）建造一个预览区，拉一个矩形元件定名为“预览区”，配置尺寸200*200，并填充一个颜色，调解透明度50% 放在左侧大图上。

连同左面板1动态面板，一起转化成动态面板，定名“左面板2”，进入状态后将矩形框预览区配置为埋没

（4）建造预览区的放大区里的图片内容，再拉一个动态面板定名为“右面板1”，配置3种状态，每种状态中放三张图中的个中一张，顺序与之前左下角小图顺序一致。劈面板右键配置“自适应内容”。

重点：对每个状态里的照片举办尺寸配置，因放大区展示的是预览区的放大图片，即左侧预览框的尺寸/左侧图片的尺寸=右侧面板的尺寸/右侧图片的尺寸，得出右侧图片尺寸：1250*1250；

（5）建造放大区展示区域，拉一个矩形元件定名“右面板2”，配置尺寸500*500，并转化为动态面板，将之前“右面板1”动态面板放在“右面板2”动态面板中，并将位置放在左面板对应的右侧位置。并默认配置为埋没。

（6）别的，我们需要一个动态面板，拉取一个动态面板定名为“轮回状态”，配置至少2个以上的状态。担保我们的行动能跑起来。位置随意安顿。我放在了左面板边距上。

（7）所有素材筹备完毕，筹备进入交互建造环节，想象一下我上面思维导图提到的结果，先来实现第1个结果，即点击左侧3张小图，“左面板2”展示对应“左面板1”大图内容，同时放大区展示“右面板2”的对应内容。

（8）接下来实现第2个鼠标移动后的交互结果。

即鼠标进入大图时展示预览区和放大区，鼠标移除时埋没预览区和放大区，点击“左面板2”配置鼠标移入时和移出时的交互。之前我们已经配置了2者为埋没状态，全部完成后预览调试结果。

（9）接下来进入到最重要的第3个结果，即进入左面板时展示预览区，并在放大区展示预览区内图片的放大结果。我们先让之前建设的动态面板”轮回状态“跑起来，如下图

（10）接着对动态面板“轮回状态”配置，状态改变时交互，这时候需要分2步看，我们先来实近况态改变时左面板预览区可以移动的结果，添加一个交互，选择“状态改变时”

（11）接下来在状态改变时添加交互，选择移动交互，为的是要担保预览区在大图内移动，所以需要配置界线。界线即左面板区域尺寸范畴500*500

这里我们需要用到鼠标函数cursor.x，为了担保移动对应到预览区中心位置，

移动预览边框，X值：[[cursor.x-左面板1的X坐标-预览边框X尺寸的一半]]，Y值同理配置一样；

我这里配置的是[[Cursor.x-150]]（因为我的边距50+预览区整体200*200的一半100=150）

（12）最后配置移动预览区后放大区展示预览区同等位置放大图片。我们同样需要配置移动时右面板的界线。主要是移动的x值和y值如何计较

同理我们可以得出，移动右面板2，X值：[[-（cursor.x-150）*2.5]]，Y值同理