• 为了共同的繁荣——习近平出席首届中国国际进口博览会纪实
  • 红豆男装4+1产品推介会红豆轻鹅绒专场火热进行中
  • 工业机器人“出手” 火箭喷管焊接不那么难了
  • 魏炜:新加坡的社会政策与社会治理
  • 西藏民主改革坚持宗教信仰自由政策
  • 展现九台人民奋斗精神 电影《庙香山传奇》将拍
  • Xi sublinha confian?a cultural mais forte
  • 《傲视天地》绿色度测评报告
  • 青藏铁路公司实施新列车运行图-民生资讯-社会频道-中工网
  • 海淀举办系列讲座 外交官走进八一学校
  • 经历春运的新能源车主,发现新能源汽车弊端,直言清明不开回家了
  • 济南最暖订单!她买下160份腊八粥,却不要送货…
  • 东航一架波音客机中途备降北京,这次是放油39吨救人
  • 首位获阿贝尔奖女性数学家乌伦贝克:被数学救赎
  • 昆明市中院依法公开宣判昆明泛亚有色公司等单位、单九良等21人非法吸收公众存款、职务侵占案
  • 智金汇 智金汇
    当前位置:智金汇 > 智金汇 >  极客圈

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

    智金汇 www.skyvein.com.cn 2019-05-03 17:43:12 IDC评述网 编辑:李娜 浏览数:28智金汇

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

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

    ?观察交互

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

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

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

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

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

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

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

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

    转载本站原创文章请注明来源:智金汇

    行业聚焦

    联通云数据亮相2019上海5G创新发展峰会

    2019年4月23日,由中国联通主办的“联通5G 共见未来 2019上海5G创新发展峰会暨中国联通全球产业链合作伙伴大会”在上海世博会隆重召开。21场主题论坛...[详细]

    汇城市之数 聚城市之智 《城市大数据平台白皮书》即将发布

    伴随着大数据时代的来临,城市大数据的概念受到了广泛关注。城市大数据应用,不同于其他行业和领域的大数据应用模式,具有鲜明的“城市化”特征。...[详细]

    微星九代酷睿笔记本泄露:最高八核i9

    Intel即将推出第九代酷睿处理器的高性能笔记本型号,也就是H系列标压版。根据目前已知的情报,Intel这一次会继续大幅跃升,最高来到8核心16线程。现在,美国...[详细]

    菜鸟牵头物流机器人研发 千亿市场值得关注

    近日,科技部公示了2018年度国家重点研发计划“智能机器人”重点专项项目,涉及多个行业领域。其中,未来的物流机器人由菜鸟独家牵头研发。 ...[详细]

    黑吃黑:地下黑客论坛被入侵,不交赎金黑客就向执法机构上交数据

    多个外媒爆料,地下黑客论坛 Basetools 被黑客入侵。奇葩的是,这个料是入侵黑客 Mat 自己抖给媒体的。不为别的,就为引起被入侵论坛的注意,逼迫该论坛支...[详细]

    活动互动

    更多

    一张图看懂联想Z6青春版

     

    IT之家5月22日消息 今天联想在国测北京会议中心正式发布了联想Z6青春版,该机的一大亮点是支持北斗三号定位系统。联想Z...[详细]

    工信部闻库:2019年重点围绕三大目标推进网络提速降费

     

    4月24日消息,在昨日国新办举行的2019年一季度工业通信业发展情况新闻发布会上,工信部信息通信发展司司长闻库表示,20...[详细]

    一门式服务+移动支付缴费 北京二手房买卖可当日办结领证

     

    “从推门进来到领走房产证,全程才用了一个多小时。”5月6日缴完税费就过户、随后就拿到了房产证,市...[详细]

    微软:继续投入支持Windows 10 UWP和应用商店

     

    IT之家5月9日消息 微软本周在西雅图召开了Build 2019开发者大会,但关于通用Windows 10应用(UWP)...[详细]

    《PC装机模拟器》登陆WeGame平台:49元,云装机

     

    IT之家4月30日消息 今天,《PC装机模拟器》登陆腾讯WeGame平台,首发价49元。游戏介绍:打造属于自己的电脑帝国...[详细]

    一周排行每月关注
    代孕 | 长江代孕网 | 广州代孕 | 辽宁代孕网 | 广州代孕 | 南京代孕 | 高鹰代孕 | 三亚新闻资讯网 | 帝国游戏网 | 韩流吧 | 淄博新闻资讯网 | 惠州代孕 | 沈阳代孕 |