IT资讯
当前位置:鸿运游戏网站 > IT资讯 >  业界资讯

Axure RP9 案例:京东与淘宝的商品图片是如何被放大的?

2019-05-12 19:17:36 编辑:可儿 浏览数:48鸿运游戏网站

在鸿运游戏网站的商品详情页中我们经常会看到图片放大器的运用,我们以京东商品详情页为例来制作这样的原型效果。案例中综合运用了鼠标移入事件、鼠标移动事件,元件的移动、元件的显示/隐藏等交互动作。 ?观察交互 首先我们观察...

在鸿运游戏网站的商品详情页中我们经常会看到图片放大器的运用,我们以京东商品详情页为例来制作这样的原型效果。案例中综合运用了鼠标移入事件、鼠标移动事件,元件的移动、元件的显示/隐藏等交互动作。

?观察交互

首先我们观察京东详情页中的图片放大效果。

当鼠标在左侧图片上方移动时,图片上方会出现一个半透明的图层跟随鼠标移动,我们将这个半透明的图层称之为放大镜。同时在原图右侧会出现一张放大版的高清大图,高清大图显示的图片信息与左侧半透明图层下的图片信息一致。

鼠标移出原图范围边界时,放大镜不在移动,同时右侧的高清大图消失。

商品图片下方有多张缩略图,鼠标在这些缩略图之间来回移动可切换上方的商品图片。鼠标停留在缩略图上方时,缩略图会有一个选中效果,边框变为了红色。

商品原图以及放大版的高清大图可以用动态面板盛放,动态面板的每个状态放置一张商品图片。商品图片及高清大图这两个动态面板中的图片顺序尽量保持一致。两个动态面板的尺寸相同,这里切记不要勾选自适应内容。

通过为页面设置鼠标移动事件,控制放大镜的移动,放大镜随鼠标移动,放大镜在水平方向的位置为鼠标的横坐标-放大镜一半的宽度,垂直方向的位置为鼠标的纵坐标-放大镜一半的高度。

在设置交互之前,我们需要添加一些逻辑判断条件,限制鼠标的移动范围,即鼠标仅能在商品图片的动态面板内移动。 在这个交互事件中,我们还需要确定高清大图的坐标位置。

与商品原图不同的是,商品原图上方的放大镜在移动,商品图片不动;右侧的高清大图在移动,上方的放大镜不动(这里的放大镜用于辅助理解,实际上不存在)。所以高清大图的移动距离=-放大镜相较于商品原图的移动距离x图片的放大倍数(高清大图的尺寸/商品原图尺寸)。

放大镜的移动距离=放大镜的坐标-商品原图的坐标。

放大镜的默认位置与商品图片的位置一致,这里建议放大镜的尺寸大于等于商品图片的一半尺寸。

默认隐藏放大镜和高清大图的动态面板。

缩略图切换商品图片这一交互效果,可以通过鼠标移入事件来显示不同的商品原图和高清大图。

元件准备?:

拖动一个动态面板至设计区域,为动态面板增加5个状态,每个状态页面中放大一张商品图片,商品图片尺寸为400 400。

再从元件库拖动一个动态面板至右侧,为动态面板增加5个状态,每个状态页面中放置一张高清大图,大图尺寸为800 800。

放置一个红色半透明的矩形至商品图片动态面板的上方,矩形尺寸为200 200,矩形与商品图片位置相同。

放大图片:

为页面设置鼠标移动事件,添加逻辑条件,当鼠标的移动范围不超出原图动态面板的边界且动态面板状态为图1时,显示放大镜,移动放大镜至绝对位置([[Cursor.x-Target.width/2]],[[Cursor.y-Target.height/2]]),显示高清大图1,移动高清大图1至绝对位置([[(LVAR2.x-LVAR1.x)2]],[[(LVAR2.y-LVAR1.y)2]])。

案例中有5张商品图片,同样的原理,为另外4张商品图片设置交互情形。最后还要为商品添加一个情形,即当鼠标移出商品图片边界外时,隐藏放大镜和高清大图。

图3-放大图片1.png

切换商品图片 将5张商品缩略图设置为一个选项组,为缩略图设置选中样式,即选中时边框线为红色。为每个缩略图添加鼠标移入事件,选中缩略图,切换商品图片和高清大图的动态面板状态,显示对应的图片。

本文地址:http://www.110tao.com/dianshanglingshou/25224.html 转载请注明出处!

分享到:

版权与免责声明:

凡未注明"稿件来源"的内容均为转载稿,本网转载出于传递更多信息的目的;如转载稿涉及版权问题,请作者联系我们,同时对于用户评论等信息,本网并不意味着赞同其观点或证实其内容的真实性;


本文地址:http://rgsgn.com/news/2019/05/12/628053445.html

转载本站原创文章请注明来源:鸿运游戏网站

行业聚焦

外媒称 三星S10+的最新更新改善了其续航表现

尽管三星最新旗舰Galaxy S10+搭载了4100mAh大电池,但它的续航表现并不令人满意,有外媒发现,S10+要比Note 9更加费电,不过三星似乎也发现了...[详细]

范忠福出席北斗海洋工程装备有限公司签约

最近,长春市政府出台产业发展方面政策,支持重大产业项目发展,重点为符合产业发展规划及相关条件的新建重点产业项目给予资金支持,支持发展总部经济,为符合政策规定的企...[详细]

已无秘密:谷歌Pixel 3a官方渲染图曝光

IT之家5月2日消息 还有不到一周的时间,Google的硬件团队将在Google I / O上推出Pixel 3a和Pixel 3a XL,这两款设备将代表谷歌...[详细]

微软待办事项To

IT之家4月26日消息 近期微软推送了To-Do iOS版v1.55更新,带来了一些新功能,包括新增共享列表支持附件添加,改善了同步体验等等。Microsoft...[详细]

林斌:有人建议小米9 SE命名为小米9 最后被雷军否决

4月25日消息,小米联合创始人、小米总裁林斌微博透露,曾经有人建议小米9叫9 Pro,9 SE叫9,后来被雷总拍死,9 SE就是9 SE,不能叫9误导用户。林斌...[详细]

活动互动

更多

开启后复联时代!曝《蜘蛛侠:英雄远征》内地定档6月28日,超北美5天

 

IT之家5月13日消息 据知名电影博主爆料,漫威宇宙第三阶段最后一部作品《蜘蛛侠:英雄远征》中国内地定档6月28日,这一...[详细]

QQ兴趣部落可以点赞打赏了

 

有网友向卢松松爆料:QQ兴趣部落可以进行点赞打赏了。一些比较热闹的兴趣部落大酋长发布的文章已经显示了打赏的结果,对比微信...[详细]

小米2019年Q1营收437.57亿元,同比增长27.2%

 

DoNews5月20日消息 (记者 费倩文)20日,小米集团发布2019年第一季度财报,据财报显示,小米第一季度营收43...[详细]

华为云城市峰会走进吉林省,激活产业新动能

 

4月28日,由吉林省商务厅、工信厅与华为公司联合举办的“选择不凡华为云城市峰会2019”在吉林省长春市拉开帷幕。华为云将...[详细]

中国高端硬派越野SUV 哈弗H9当之无愧

 

  如今消费者钱包越来越鼓,自驾游的欲望越来越强烈。资深自驾游老炮儿都信奉一句话“越原始,越优美,越挑战”,征服祖国壮丽...[详细]

一周排行每月关注