您的位置: 首页 > 软件教程 > Axure > Axure如何制作商品详情页产品图展示效果?

Axure如何制作商品详情页产品图展示效果?

6.0分
出处:3lian.com 时间:2018-04-20

您可能感兴趣的话题: Axure  

核心提示:Axure如何制作商品详情页产品图展示效果?你怎么看?

   1、打开Axure做好工作准备

   2、首先拖入一个动态面板,命名为d,大小为387×121,将小图按照顺序排列好,根据美观度自主调节图片间距如下图:

Axure如何制作商品详情页产品图展示效果?

  3、点进去d的状态1,将小图全部选中转换为动态面板,命名为d1,d1展示全部的5张小图,而d则展示4张小图,如下图:

Axure如何制作商品详情页产品图展示效果?

  4、在d1中拖入一个矩形框,外框设置为红色,颜色设为透明,如下图:

Axure如何制作商品详情页产品图展示效果?

  5、将大图放置在小图的上方,并转换为动态面板,命名为d_big,如下图:

Axure如何制作商品详情页产品图展示效果?

  6、给五张小图分别命名:small_1、small_2、small_3、small_4、small_5,设置鼠标移入移出事件,当鼠标移入时,设置红色外框(命名为wk_red),移动到小图的坐标位置(x,y),这里用到函数[[LVAR1.x]]、[[LVAR1.y]],其中LVAR1代表的是元件小图,同时设置大图根据小图进行状态切换,效果如下图:

Axure如何制作商品详情页产品图展示效果?

  7、在小图两边画上左右箭头,点击左箭头,让d1向左移动一定距离,点击右箭头,让d1向右移动一定距离,向左距离为负值,向右移动为正值。具体参考下图:

Axure如何制作商品详情页产品图展示效果?

  8、效果预览

Axure如何制作商品详情页产品图展示效果?

网友评论
精品软件课程
更多 >
快播播放器(Qvod Player)是一款基... [详细]
360安全卫士是当前功能最强、效果最好、最受... [详细]
会声会影(Corel VideoStudio... [详细]
腾讯QQ支持在线聊天、视频电话、点对点断点续... [详细]
搜狗拼音输入法是网上最流行、功能最强大的拼音... [详细]
Windows 7 是由微软公司开发的,具有... [详细]