Axure怎么制作商品详情页产品图展示效果?
我要评论电商平台商品详情页大同小异，有一个模块是肯定少不了的，就是产品图展示区域，下面主要就展示图区的一些小效果做一些说明。
1、网上找一些图片素材，要分两批，一批大图，一批小图（不想自己找的，文末有素材附件）
2、首先拖入一个动态面板，命名为d，大小为387×121，将小图按照顺序排列好，根据美观度自主调节图片间距如下图：
3、点进去d的状态1，将小图全部选中转换为动态面板，命名为d1，d1展示全部的5张小图，而d则展示4张小图，如下图：
4、在d1中拖入一个矩形框，外框设置为红色，颜色设为透明，如下图：
5、将大图放置在小图的上方，并转换为动态面板，命名为d_big，如下图：
6、给五张小图分别命名：small_1、small_2、small_3、small_4、small_5，设置鼠标移入移出事件，当鼠标移入时，设置红色外框（命名为wk_red），移动到小图的坐标位置（x,y），这里用到函数[[LVAR1.x]]、[[LVAR1.y]]，其中LVAR1代表的是元件小图，同时设置大图根据小图进行状态切换，效果如下图：
7、在小图两边画上左右箭头，点击左箭头，让d1向左移动一定距离，点击右箭头，让d1向右移动一定距离，向左距离为负值，向右移动为正值。具体参考下图：
8、效果预览
二、能力提升
以下实现这个效果的方法，并不是最简便的方法，也并不是最完美的方法，只是最基础的方法，这个实现方法简单易懂，还有实现起来复杂，最终效果更逼真，更方便的方法，这里不再做特别说明，大家下去自己研究。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显示时，对应右边图片也跟随变换
相关推荐：
相关文章
Axure RP 8怎么给下拉列表框添加多个值？Axure RP 8中想要制作一个下拉列表，有多个数值，该怎么制作呢？下面我们就来Axure给下拉列表框添加多行值的教程，需要的朋友可以2017-01-05
Axure RP 8椭圆形元件怎么设置透明度阴影等属性？Axure RP 8中自带了椭圆形元件，这个元件怎么设置阴影、边框、填充色呢？下面我们就来看看详细的教程，需要的朋友可以参考2017-01-04
Axure RP 8怎么设计内联框架原型？Axure设计网页原型的时候，想要做一个内部嵌套框架或页面，将视频、页面、地图放入框架中，该怎么设计呢？下面我们就来看看详细的教程，2017-01-04
Axure RP 8怎么制作一个旋转的圆角图片？Axure中想要旋转图片元件，将直角图形变成圆角，该怎么设置呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-04
Axure RP 8怎么制作按钮控制下拉框选项？Axure RP 8中想要制作一个按钮触发事件，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-01
Axure RP 8怎么制作验证码倒计时原型？平时我们填写手机验证码的时候，验证码都是有时效的，该怎么设置一分钟的倒计时时效呢？下面我们就来看看详细的教程，需要的朋友可以2016-12-30
Axure RP 8怎么设置文字提交工功能原型？Axure中经常制作一些网页原型，想要设置一个可以提交文本的功能，该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考2016-12-30
Axure RP 8怎么设计可以完成数学加法计算？Axure设计网页的时候，想要在输入框中输入数据，完成加法计算，该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考2016-12-30
Axure RP 8怎么利用变量控制标题变化？Axure中想要制作一个通过按钮改变二级标题，该怎么设置呢？下面我们就来看看Axure结合变量和元件控制标题变化的教程，需要的朋友可以2016-12-29
Axure RP 8怎么设计图片点赞功能的网页原型？想要给网页添加一个图片点赞的功能，该怎么添加呢？下面我们就来看看使用Axure来完成的教程，需要的朋友可以参考下2016-12-29
最新评论