• QQ空间
  • 收藏

Axure教程:商品图片放大效果制作步骤详解(简版)

| 2019-05-12 阅读 23

商品图片,在鼠标移到就有放大的效果,这就情况该如何实现?

学习做京东、淘宝等购物网站,鼠标移入商品图片上就有放大的效果,如何实现:

选中商品小图,显示对应的商品中图(简版不做说明) 鼠标移动到商品中图,鼠标跟随框显示并始终跟随,移出商品中图则隐藏 鼠标移动到商品中图,商品大图显示并移动到指定位置

一、元件布局

涉及的元件主要是图片,商品图片从网上下载高清大图,用图片处理软件,将商品大图设为800*800规格,商品中图为400*400规格,商品小图设为50*50规格。

中图和小图如上图布局后,在中图旁边添加动态面板800设置为400*400规格,将商品大图放入state1里,在商品中图上添加矩形200*200规格,重命名为鼠标跟随,设置不透明度24%,颜色粉色,商品图片按照规格重命名。

将鼠标跟随和商品大图默认设置为隐藏,如图中两处可以设置。

二、添加事件

(1)选中商品小图,显示对应的商品中图(简版不做说明)

(2)鼠标移动到商品中图,鼠标跟随框显示并始终跟随,移出商品中图则隐藏

先设置条件,鼠标移动时,有交互效果的范围,就在商品中图范围内,设置坐标的边界。函数cursor.x或者y,是指鼠标的x轴y轴的坐标,为全局变量可以从中选到或者直接输入使用,不用定义。局部变量为商品中图,他有上下左右4个属性。具体范围如图示设置。

注:最后一个条件,动态面板800的面板状态为state1,是为了多图切换用,简版不做切换不加也行。

情形添加后,下方会有添加按钮,点击添加元件显示动作,选择鼠标跟随矩形显示即可,鼠标移出隐藏在最后所有情形之外设。

添加动作移动,目标选择鼠标跟随,此处为了设置矩形跟随鼠标移动的位置,因为鼠标位于矩形的中间,矩形的定位点在左上角,有位置差。

到达的x轴=鼠标x轴-鼠标跟随的宽的一半,因为目标已经是鼠标跟随矩形,所以用了target全局变量,他的属性是宽和高。同理得y轴坐标,边界同鼠标。

(3)鼠标移动到商品中图,商品大图显示并移动到指定位置

添加动作显示,选择目标动态面板800显示,一般商城商品中图旁边会有商品的信息,此时商品大图显示后要选择置于顶层,添加动作移动,注意此处目标选择动态面板state1里面的图片,如果是多图,则设置多个状态(state)每个里面单独放商品大图,跟情形里面的面板状态对应选择。

商品大图到达的位置应该为鼠标跟随矩形坐标到商品中图坐标的倍数,这个倍数等于商品大图/商品中图,为了简化设计一开始制作就设为了2倍大。因为商品大图在state1的移动位置是跟鼠标逆向的,X和Y轴坐标都应该为负。

到达X坐标:-[[(LVAR2.x- LVAR1.x)*2 ]]同理得Y坐标: -[[(LVAR2.y- LVAR1.y)*2 ]]

为了不混淆,LVAR1还是跟之前的局部变量一样,为商品中图,LVAR2为鼠标跟随矩形。

全部设置完毕后,最后增加如果非任何一种情况,则隐藏矩形和动态面板。

注意:条件添加选项框什么都不用填,直接确定即可。

 

本文由 @粉小妞Holly 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

2019-05-12
淘宝运营 极光大数据:2019年母亲节专题研究(附下载)
报告下载:添加199IT官方微信【i199it】,回复关键词【2019年母亲节专题研究】即可 值母亲节来临之际,极光大数据(Aurora Mobile, N... <详情>
2019-05-12
淘宝运营 玩转百度经验,如何让关键词秒上百度首页
  各种互联网项目,新手可操作,几乎都是0门槛 目前SEO竞争市场越来越大,核心关键词的优化难度也越来越大,就拿最近的百度的手段来... <详情>
2019-05-12
淘宝运营 Axure教程:商品图片放大效果制作步骤详解(简版)
商品图片,在鼠标移到就有放大的效果,这就情况该如何实现? 学习做京东、淘宝等购物网站,鼠标移入商品图片上就有放大的效果,如何实现: 选中商品小图,显示对应的... <详情>
2019-05-12
淘宝运营 Sprout Social:2018年Sprout社交指数
Sprout Social发布了新报告“2018年Sprout社交指数”。 消费者希望在社交媒体上获得品牌认知和考察方面的内容。但是,80%的社交媒体营销人员过... <详情>

编辑推荐