性商网 性商网
当前位置:性商网 > 性商网 >  IT动态

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

性商网 www.jl-12365.net.cn 2019-04-28 21:48:00 IDC评述网 编辑:糖心 浏览数:25性商网

在电商的商品详情页中我们经?;峥吹酵计糯笃鞯脑擞?,我们以京东商品详情页为例来制作这样的原型效果。案例中综合运用了鼠标移入事件、鼠标移动事件,元件的移动、元件的显示/隐藏等交互动作。 ?观察交互 首先我们观察...

在电商的商品详情页中我们经?;峥吹酵计糯笃鞯脑擞?,我们以京东商品详情页为例来制作这样的原型效果。案例中综合运用了鼠标移入事件、鼠标移动事件,元件的移动、元件的显示/隐藏等交互动作。

?观察交互

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

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

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

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

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

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

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

与商品原图不同的是,商品原图上方的放大镜在移动,商品图片不动;右侧的高清大图在移动,上方的放大镜不动(这里的放大镜用于辅助理解,实际上不存在)。所以高清大图的移动距离=-放大镜相较于商品原图的移动距离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://www.jl-12365.net.cn/news/2019/04/28/250076256.html

转载本站原创文章请注明来源:性商网

行业聚焦

微软Surface Laptop 2/Pro 4电池新Bug:7分钟掉电25%

IT之家8月29日消息 一些用户报告称他们的Surface Laptop 2和Surface Pro 4在最近的Windows固件更新后遭遇电池续航大降级问题。...[详细]

1.75亿台安卓平板电脑运行Play Store商店,谷歌强烈建议优化大屏App

IT之家9月6日消息 随着Android 10正式版推出以及本周在IFA 2019上新平板电脑的发布,谷歌再次鼓励开发人员优化大屏幕Android设备应用。谷歌...[详细]

奔腾集团“暗渡陈仓”操纵股价,多次威胁恐吓调查人员被罚

IT之家9月16日消息 中国证券监督管理委员会近日向奔腾集团开出两份行政处罚决定书。其中一份对奔腾集团因未按规定履行信披义务、信披中存虚假记载等违规事实进行了处...[详细]

三大运营商参加“提速降费”座谈会:中小企业资费再降15%

8月30日消息,今天三大运营商在北京举办了“提速降费”中小企业用户面对面座谈会。今年3月份政府报告要求,中小企业宽带平均资费再降15%。以此为背景,三大运营商在...[详细]

因恶意投诉被暂?!吧钜狗窨ā?,司机诉滴滴公司获赔偿

IT之家8月27日消息 据北京互联网法院消息,因认为滴滴平台以乘客投诉为由而无理暂停司机“深夜服务卡”功能,导致订单量大量减少,滴滴司机杨某将滴滴出行科技有限公...[详细]

活动互动

更多

科普:为何普速列车座位面对面,高铁动车却朝前?

 

IT之家8月27日消息 经常坐火车的小伙伴们应该都注意到了,普速旅客列车上的座位都是面对面,而高铁、动车组列车上的座位都...[详细]

Win10云端重装功能更多细节曝光

 

上周,外媒 MSPU 曾撰写过一篇有关 Windows 10“云下载还原”功能的介绍。当您需要重置 / 修复 PC 时,...[详细]

京东家电815:家电卡充5000得5815元,55寸4K电视低至1329元

 

京东家电815周年庆现已开启,优惠券满1888减100、满288减20、满999减50、满2000减100元,Plus专...[详细]

米家互联网空调C1大一匹开启预约:一级能效,2499元

 

IT之家8月20日消息 米家互联网空调C1 大1匹现已在京东开启预约,一级能效,全直流变频,售价2499元。米家互联网空...[详细]

美国人在网上喜欢买啥手机?第一不是苹果

 

如今,线上已经成为国人买手机的主要渠道之一。目前,大家都知道华为(含荣耀)、小米、OPPO、vivo等品牌在国内卖得最好...[详细]

一周排行每月关注
广州代孕 | 代孕 | 广州代孕 | 黑龙江代孕 | 高鹰代孕 | 高鹰代孕 | 神州中泰助孕 | 广州代孕 | 代孕包选性别价格 | 温岭新闻资讯网 | 贴心宝卫助孕网 | 深深爱代怀孕网 | 恋上小说网 |
  • 台湾学子的热门选项:去上海实习,到大陆就业
  • 沪上印刷水平再获国际认可
  • "三方联动"为辽宁企业融资近百亿
  • 私家车雨中抛锚 济南公交司机两度下车帮助推车
  • ? 谷歌承认在偷录用户日常对话!为了语音识别系统的开发
  • [及时点]谁来为逃票“恶果”买单?
  • 第二届中国县域经济发展论坛聚焦高质量发展
  • 频获大额融资!素质教育逆势而上!巨头加速布局这些细分赛道......
  • 苋菜分红、白、青 没想到功效不同
  • 2019 GAITC 专题论坛之十二丨智慧交通--智慧城市的核心动脉
  • 苏州相城打造百亿级空天新材料产业集群
  • 中国银行业新媒体3月排行榜发布
  • 2019年藏晚将于2月3日播出
  • 新春走基层:吐鲁番特色年货“搅热”湖南新春
  • 杭州昌化:“官帽”合不合 纪委掂一掂