• 让孩子从小学交规 青岛家长收到6700余张“爱的罚单”
  • 沪上公园早樱提前绽放迎游人
  • 建设银行特约商户首页
  • 2019年靖江市教育工作会议召开
  • 克拉玛依有朵美丽的“云”
  • 美国国务卿杜勒斯拒绝与周恩来握手的历史真相
  • 两只大熊猫四月前往丹麦定居 丹麦驻华大使将全程护送
  • 税务检查最多查一次 全力支持民营经济高质量发展
  • 抬头看!台风后绝美“蓝鲸蓝”,幸福感爆棚
  • 香菇柴鸡汤,促进代谢
  • 通州区公布"青年榜样"名单:建功副中心 追梦新时代
  • 早期乳腺癌患者开展保乳术后放疗可实现“美丽生存”
  • 新零售下的老字号"复兴"
  • 新平推出磨盘山户外运动挑战赛
  • 经常梳头的好处有哪些?要掌握正确的方法?
  • 性商网 性商网
    当前位置:性商网 > 性商网 >  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

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

    行业聚焦

    爱奇艺第一季度营收为70亿元,同比增长43%

    北京时间5月17日消息,爱奇艺公司(NASDAQ:IQ)今天发布了截至3月31日的2019财年第一季度未经审计财报。财报显示,爱奇艺第一季度总营收为70亿元(人...[详细]

    电商销售大数据分析延伸产业链“互联网+”为农业生产插上翅膀

    大数据时代的到来,推动企业战略从“业务驱动”转向“数据驱动”,海量的用户访问背后潜藏着巨大的商机,也为农业生产带...[详细]

    一加7 Pro现已开启预约:5月16日正式发布

    IT之家5月13日消息 ,据一加手机官方消息,一加7 Pro 现已在京东和官网开启预约;该机将于5月16日在北京正式发布。核心方面,一加7 Pro搭载高通骁龙8...[详细]

    AMD RX Vega 56 成功实现1080p/30帧光线追踪

    IT之家5月9日消息 根据外媒的报道,在Cryengine网站上最近的一篇博文中,Crytek已经确认Neon Noir实时光线追踪演示Demo的一些细节。Ne...[详细]

    传一汽集团接近达成协议,对拜腾投资1亿美元

    近日,有知情人士称,中国电动汽车初创公司拜腾汽车正寻求融资约5亿美元,一汽集团接近达成协议,对拜腾投资1亿美元。融资完成后,拜腾的估值可能超过25亿美元。对此,...[详细]

    活动互动

    更多

    法拉利将于5月31日发布全新混动跑车:接近1000马力

     

    IT之家5月14日消息 来自外媒motor1的报道,根据5月31日在马拉内罗揭幕的邀请函,法拉利即将推出全新的混合动力车...[详细]

    百度与瑞士驻华大使馆签订联合意向书 国家小程序“瑞士”上线

     

    DoNews4月25日消息(记者 向密) 百度与瑞士驻华大使馆正式签署联合意向书,国家小程序“瑞士&rdqu...[详细]

    九代酷睿i3开放睿频加速:秒变i5

     

    Intel处理器这几年几代产品的规格迅速提高,每一代都能迈上一个新台阶,比如近日全面发布的第九代酷睿,无论桌面还是笔记本...[详细]

    新氧上市:连续9季度高速增长 将从医美进军消费医疗服务市场

     

    DoNews5月2日消息(记者 向密) 新氧科技成功登陆纳斯达克,交易代码为“SY”,开盘价16...[详细]

    为什么伤心流泪时鼻子会感觉酸?

     

    你一定有过这样的经历:伤心难过哭泣时,或者热泪盈眶的时候,鼻子会伴随着酸痛感。你有没有好奇过,这是为什么呢?鼻子和眼睛的...[详细]

    一周排行每月关注
    南昌助孕 | 佛山代怀孕 | 香港代怀孕 | 浙江助孕天使网 | 武汉代孕公司 | 温州代孕 | 高鹰代孕 | 南宁代孕 | 高鹰代孕 | 郑州助孕医院价格 | 广州代孕 | 温岭新闻资讯网 | 贴心宝卫助孕网 | 深深爱代怀孕网 | 恋上小说网 | 苏州代孕 |