Axure教程：商品详情页制品图效果展示

nqkk58

文案重点对商品详情页制品图的展示原型进行了简要的说明，期盼能够给大众带来些收获。

背景介绍

电商平台商品详情页大同小异，有一个模块是肯定少不了的，便是制品图展示区域，下面重点就展示图区的有些小效果做有些说明。

准备工作

网上找有些照片素材，要分两批，一批大图，一批小图（不想自己找的，文末有素材附件）

功能实现

1、首要拖入一个动态面板，命名为d，体积为387×121，将小图根据次序摆列好，按照美观度自主调节照片间距如下图：

2、点进去d的状态1，将小图所有选中转换为动态面板，命名为d1，d1展示所有的5张小图，而d则展示4张小图，如下图：

3、在d1中拖入一个矩形框，外框设置为红色，颜色设为透明，如下图：

4、将大图安置在小图的上方，并转换为动态面板，命名为d_big，如下图：

5、给五张小图分别命名：small_1、small_2、small_3、small_4、small_5，设置鼠标移入移出事件，当鼠标移入时，设置红色外框（命名为wk_red），移动到小图的坐标位置（x,y），这儿用到函数[[LVAR1.x]]、[[LVAR1.y]]，其中LVAR1表率的是元件小图，同期设置大图按照小图进行状态切换，效果如下图：

6、在小图两边画上上下箭头，点击左箭头，让d1向左移动必定距离，点击右箭头，让d1向右移动必定距离，向左距离为负值，向右移动为正值。详细参考下图：

7、最后效果如下图：

能力提高

那样再实现了这般的效果后，还有另一的一个效果，亦用的比较多，如下图所示：

办法说明

以下实现这个效果的办法，并不是最简便的办法，亦并不是最完美的办法，只是最基本的办法，这个实现办法简单易懂，还有实现起来繁杂，最后效果更逼真，更方便的办法，这儿再也不做尤其说明，大众下去自己科研。

ps:原型只是工作的一种手段，并不必须在这上面花费太多精力，不外，多认识一点知识总是好的。

实现过程

1、先拖入一个体积为200×200的矩形框，背景色设置为#666666，透明度为50%，命名为follow_1，而后按住ctrl键，复制出三个，分别命名为follow_2,follow_3,follow_4，如下图：

2、在画布空白区域，根据下图所示，拖入文本框，四个文本框，分别命名为：follow_1_x,y，follow_2_x,y，follow_3_x,y，follow_4_x,y。

3、设置页面载入时事件，获取follow_1~4的坐标值。

4、拖入动态面板，命名为j_big，将四张切割图根据次序，放入动态面板中，如下图。

5、设置鼠标的悬停事件，当鼠标处在区别区域时，表示区别标记的follow。详细设置如下图：

6、设置区别follow表示时，对应右边照片亦跟随变换

rp文件：rp文件

本文由 @神奈川00 原创发布于人人都是制品经理。未经许可，禁止转载。