Axure商品详情页产品图展示效果如何制作?来看看我们小编怎么操作
【Axure商品详情页产品图展示效果如何制作】1、网上找一些图片素材 , 要分两批 , 一批大图 , 一批小图(不想自己找的 , 文末有素材附件)
2、首先拖入一个动态面板 , 命名为d , 大小为387×121 , 将小图按照顺序排列好 , 根据美观度自主调节图片间距如下图:
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UH022-0.png)
3、点进去d的状态1 , 将小图全部选中转换为动态面板 , 命名为d1 , d1展示全部的5张小图 , 而d则展示4张小图 , 如下图:
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UIX3-1.png)
4、在d1中拖入一个矩形框 , 外框设置为红色 , 颜色设为透明 , 如下图:
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UMN8-2.png)
5、将大图放置在小图的上方 , 并转换为动态面板 , 命名为d_big , 如下图:
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UI047-3.jpg)
6、给五张小图分别命名:small_1、small_2、small_3、small_4、small_5 , 设置鼠标移入移出事件 , 当鼠标移入时 , 设置红色外框(命名为wk_red) , 移动到小图的坐标位置(x,y) , 这里用到函数[[LVAR1.x]]、[[LVAR1.y]] , 其中LVAR1代表的是元件小图 , 同时设置大图根据小图进行状态切换 , 效果如下图:
7、在小图两边画上左右箭头 , 点击左箭头 , 让d1向左移动一定距离 , 点击右箭头 , 让d1向右移动一定距离 , 向左距离为负值 , 向右移动为正值 。具体参考下图:
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UI956-5.png)
8、效果预览
二、能力提升
以下实现这个效果的方法 , 并不是最简便的方法 , 也并不是最完美的方法 , 只是最基础的方法 , 这个实现方法简单易懂 , 还有实现起来复杂 , 最终效果更逼真 , 更方便的方法 , 这里不再做特别说明 , 大家下去自己研究 。ps:原型只是工作的一种手段 , 并不需要在这上面花费太多精力 , 不过 , 多了解一点知识总是好的 。
1、先拖入一个大小为200×200的矩形框 , 背景色设置为#666666 , 透明度为50% , 命名为follow_1 , 然后按住ctrl键 , 复制出三个 , 分别命名为follow_2,follow_3,follow_4 , 如下图:
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UJ2J-7.jpg)
2、在画布空白区域 , 按照下图所示 , 拖入文本框 , 四个文本框 , 分别命名为:follow_1_x,y , follow_2_x,y , follow_3_x,y , follow_4_x,y 。
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UH103-8.png)
3、设置页面载入时事件 , 获取follow_1~4的坐标值 。
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UL347-9.png)
4、拖入动态面板 , 命名为j_big , 将四张切割图按照顺序 , 放入动态面板中 , 如下图 。
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UJ140-10.png)
5、设置鼠标的悬停事件 , 当鼠标处于不同区域时 , 显示不同标记的follow 。具体设置如下图:
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UH517-11.png)
6、设置不同follow显示时 , 对应右边图片也跟随变换
![Axure商品详情页产品图展示效果如何制作](http://pic.yunnanlong.com/230321/205UK122-12.png)
推荐阅读
- 在网易考拉里将商品加入购物车基础操作
- vivox30pro参数配置详情介绍 vivox30pro参数
- 1688详情页图片尺寸 TB详情页图片尺寸多少
- 测评性能值得入手吗 iphone12配置参数详情对比
- TB商品被监管一般几天被放出来
- 使用Axure制作出焦点元件具体操作步骤
- 快手商品审核不通过什么原因 快手商品老是审核不通过怎么办
- 商品房买卖合同的注意事项有哪些
- 拼多多买了东西店家下架还能不能退货 拼多多下架的商品可以退货吗
- 京东限购是什么 京东以下商品为限购商品什么意思