时间:2021-05-22
电商平台商品详情页大同小异,有一个模块是肯定少不了的,就是产品图展示区域,下面主要就展示图区的一些小效果做一些说明。
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设计的网页怎么生成html文件?
Axure RP 8怎么制作图形排除重叠位模型?
Axure RP 8怎么利用按钮控制单选框和复选框?
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
那么淘宝店铺运营详情页是如何制作的呢?现在的详情页制作,普遍卖家有两个误区:1、轻视详情页作用以为做产品的详情页,就是简单的摆放几张产品图,和产品尺寸,然后加一
网上销售商品主要是通过展示图片,商品详情页是让买家更详细的了解商品信息。有些卖家在设置好主图和详情页之后,发现并没有引流的效果,想要更换一下,那么淘宝换主图
所谓主图,指的就是商品详情页首屏左侧商品图的第一个位置,主图呈现效果是详情页中最为重要的内容。主图视频就是取代以前的商品图片,转变成以长达6秒钟的视频来展示宝贝
拼多多商品主图直接影响产品点击率,而详情页影响的是转化率。主图制作的好,产品点击率高,产品受客户欢迎,拼多多平台自然会给予更多的曝光,而这个时候商品详情页能否吸
一个产品的主图、标题、详情页、价格是决定客户是否成交的关键,那么宝贝详情页是对于产品的转化率起着比较重要的作用。有很多卖家不知道怎么去制作宝贝详情页,或者说不知