通过图片 找到桌面相同图片区域坐标_【Axure RP9原型案例】京东与淘宝的商品图片是如何被放大的...
摘要:在电商的商品详情页中我们经常会看到图片放大器的运用,我们以京东商品详情页为例来制作这样的原型效果。案例中综合运用了鼠标移入事件、鼠标移动事件,元件的移动、元件的显示/隐藏等交互动作。
![](/assets/blank.gif)
京东示意图
观察交互
首先我们观察京东详情页中的图片放大效果。当鼠标在左侧图片上方移动时,图片上方会出现一个半透明的图层跟随鼠标移动,我们将这个半透明的图层称之为放大镜。同时在原图右侧会出现一张放大版的高清大图,高清大图显示的图片信息与左侧半透明图层下的图片信息一致。鼠标移出原图范围边界时,放大镜不在移动,同时右侧的高清大图消失。商品图片下方有多张缩略图,鼠标在这些缩略图之间来回移动可切换上方的商品图片。鼠标停留在缩略图上方时,缩略图会有一个选中效果,边框变为了红色。
思路分析
商品原图以及放大版的高清大图可以用动态面板盛放,动态面板的每个状态放置一张商品图片。商品图片及高清大图这两个动态面板中的图片顺序尽量保持一致。两个动态面板的尺寸相同,这里切记不要勾选自适应内容。
通过为页面设置鼠标移动事件,控制放大镜的移动,放大镜随鼠标移动,放大镜在水平方向的位置为鼠标的横坐标-放大镜一半的宽度,垂直方向的位置为鼠标的纵坐标-放大镜一半的高度。在设置交互之前,我们需要添加一些逻辑判断条件,限制鼠标的移动范围,即鼠标仅能在商品图片的动态面板内移动。
在这个交互事件中,我们还需要确定高清大图的坐标位置。与商品原图不同的是,商品原图上方的放大镜在移动,商品图片不动;右侧的高清大图在移动,上方的放大镜不动(这里的放大镜用于辅助理解,实际上不存在)。所以高清大图的移动距离=-放大镜相较于商品原图的移动距离x图片的放大倍数(高清大图的尺寸/商品原图尺寸)。放大镜的移动距离=放大镜的坐标-商品原图的坐标。
放大镜的默认位置与商品图片的位置一致,这里建议放大镜的尺寸大于等于商品图片的一半尺寸。默认隐藏放大镜和高清大图的动态面板。
缩略图切换商品图片这一交互效果,可以通过鼠标移入事件来显示不同的商品原图和高清大图。
制作原型
元件准备
拖动一个动态面板至设计区域,为动态面板增加5个状态,每个状态页面中放大一张商品图片,商品图片尺寸为400x400。再从元件库拖动一个动态面板至右侧,为动态面板增加5个状态,每个状态页面中放置一张高清大图,大图尺寸为800x800。放置一个红色半透明的矩形至商品图片动态面板的上方,矩形尺寸为200x200,矩形与商品图片位置相同。
![](/assets/blank.gif)
图2-线框图
放大图片
为页面设置鼠标移动事件,添加逻辑条件,当鼠标的移动范围不超出原图动态面板的边界且动态面板状态为图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张商品图片设置交互情形。最后还要为商品添加一个情形,即当鼠标移出商品图片边界外时,隐藏放大镜和高清大图。
![](/assets/blank.gif)
图3-放大图片
![](/assets/blank.gif)
图4-隐藏放大镜和高清大图
切换商品图片
将5张商品缩略图设置为一个选项组,为缩略图设置选中样式,即选中时边框线为红色。为每个缩略图添加鼠标移入事件,选中缩略图,切换商品图片和高清大图的动态面板状态,显示对应的图片。
![](/assets/blank.gif)
图5-缩略图设置选中样式
![](/assets/blank.gif)
图6-切换商品图片
到这里,原型已经制作完毕,点击预览,在浏览器中查看原型。
关注头条号私信可获取源文件及Axure RP9安装包,本账号将不定期更新更多关于Axure RP9的原创教程。
通过图片 找到桌面相同图片区域坐标_【Axure RP9原型案例】京东与淘宝的商品图片是如何被放大的...相关推荐
- vue-element-admin 简单实现仿淘宝实现商品图片放大镜效果
1.HTML <template><div v-loading="Loading" class="goodsUpload"><!- ...
- 用JS实现PC端淘宝查看商品图片放大镜效果
实现放大镜功能 一.前言 二.图示淘宝商品放大镜效果 三.需要掌握的知识点 四.放大镜实现原理 五.放大镜代码及注释 六.放大镜最终成果 七.放大镜源码 八.总结 一.前言 今天翻阅文件夹看到了之前写 ...
- 利用python爬取淘宝的商品图片!
代码 from selenium import webdriver from selenium.webdriver.common import keys import time import requ ...
- 利用python爬取淘宝的商品图片
代码 from selenium import webdriver from selenium.webdriver.common import keys import time import requ ...
- CDN工作原理及淘宝双十一图片访问实战
淘宝的图片访问,有98%的流量都走了CDN缓存.只有2%会回源到源站,节省了大量的服务器资源. 但是,如果在用户访问高峰期,图片内容大批量发生变化,大量用户的访问就会穿透cdn,对源站造成巨大的压力. ...
- App瘦身最佳实践(分析了微信、淘宝、微博图片文件的放法)
本文会不定期更新,推荐watch下项目.如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以提交pull request. 本文的示例代码主要是基于作者的经验来编写的,若你有其他 ...
- 淘宝系App图片为什么在北京电信网络加载这么慢?
欢迎访问我的个人网站:https://coderyuan.com 文章目录 先讲讲怎么回事 不能抓包 初步判断是DNS或IPv6问题(其实不是) 反馈 被逼无奈,只好搞逆向 利用LayoutInspe ...
- jquery: JS淘宝网产品图片局部放大代码
实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- 微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码 效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
最新文章
- CDN加速技术和云计算
- 下一个大计算平台? Amazon Echo 研发幕后全揭露
- 78行Python代码帮你复现微信撤回消息!
- javax.servlet.ServletException: Servlet[springmvc]的Servlet.init()引发异常
- 6-java代码片段
- android 自定义viewgroup onmeasure,一篇文章搞懂Android 自定义Viewgroup的难点
- 女朋友生气了,日常生活中该具体怎么做才好,才好女朋友开心?
- ES10的动态导入文件
- python分支条件语句格式_Python基础-06 if语句——分支结构(选择结构)
- 【飞秋】做需求分析一点心得
- 对我帮助很大的ESXCLI命令
- 【包邮免费送】Python 全栈知识图谱
- Git 正在吞噬世界!
- 思科认证和华为认证哪个更香?
- 回溯算法高效解标准数独(MarkDown)
- t450加固态硬盘教程_联想 thinkpad t450s 加装固态硬盘及内存图解
- JAVA学习DAY3 - 循环 输出平行四边形,等腰三角形,菱形
- 设置Google文档离线同步,更好的高效离线工作
- 英伟达A100 Tensor Core GPU架构深度讲解
- ansys workbench17.0 lsdyna模块设置时间步长
热门文章
- python入门心得_记初学python的一些心得
- ecs服务器数据迁移_如何非常方便地从Windows文件服务器把数据完整地迁移到ONTAP Select...
- 最全的jquery datatables api 使用详解
- Java 基础——构造器和方法的区别
- Java 三大特性之——继承
- Linux 系统应用编程——网络编程(TCP/IP 数据包格式解析)
- 2018年五大最佳前端框架比较,程序员会怎么选?
- 安装Microsoft Windows SDK 7.1时出现的错误(附解决办法)
- vim匹配特定的行并删除它
- [Redux/Mobx] 你有使用过redux-saga中间件吗?它是干什么的?