Axure-局部放大图片交互

前言:

说起局部放大图片的交互大家第一想到的是哪个场景呢,博主第一反应PC端的购物应用,我们在看到某件衣服时可以通过滑块放大衣服局部以供用户查看衣服的细节。

制作:

一、静态页面的制作:今天我们就来临摹一下当当网,先完成静态页面的制作。

二、当鼠标移入服饰大图下面对应服饰时,对应大图随之改变,这里大家可以使用动态面板的方式,但这里博主图个新鲜,使用设置图片交互。这里需要注意,我们需要先上传一张服饰大图并将其命名为【img】,然后将我们需要用到的图片保存在本地。

三、接下来制作可在服饰大图内部可以滑动的滑块,用以实现后期当滑块滑到哪个区域对应区域展示放大效果。

先用一个热区覆盖住服饰图片的位置,并将其命名为【隔板】,该位置就是我们滑块可移动的位置。

再拖入一个矩形不透明性设置到20左右,长宽均只有【隔板】热区的一半,改动态面板就是我们的滑块,我们将改动态面板命名为【滑块】。

在正式做滑块交互前,我们先说一下本次交互需要用到的函数,axure中函数很多,这里我们不需要刻意的去学,即用即学即可。

Cursor.x:鼠标所有x轴坐标的值

Cursor.y:鼠标所有y轴坐标的值

top:元件顶部y轴坐标

left:元件左边x轴坐标

right:元件右边x轴坐标

bottom:元件底部Y轴坐标

height:元件的高度

width:元件的宽度

这些变量学习起来其实很简单,但是axure没有打印变量值的功能,对很多干过开发的同学可能会有点不习惯。

接下来设置【滑块】可自由移动的交互。这里我给大家解释下为什么要这样做,假设【隔板】的坐标为(0,0)【滑块】的长宽分别为200,如果鼠标x轴的位置在100,那么X轴坐标则为100-200/2,y轴也是同理,鼠标永远都在【滑块】的中心位置。

做完以上交互我们会发现现在【滑块】的移动是没有边界限制的,现在我们实现边界限制的交互。

接下来制作当【滑块】滑到某个区域时,对应区域放大展示。

新增【放大图】动态面板大小设置为(400,400)与原本【隔板】大小保持一致,在【放大图】动态面板中新增衣服图片。大小是【隔板】的两倍,并设置为隐藏,接下来我们来看下交互。

当鼠标放在【隔板】中时则展示【放大图】因为【放大图】紧紧的挨着【隔板】【放大图】动态面板的面积也是与【隔板一致】【放大图】的大小又比【滑块】大两倍。故而有如下交互。

这个样例写的太累了,先这样吧,应该也说明清楚了。

相关推荐
laowangpython15 天前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
北极星日淘15 天前
前端 i18n 中日双语交互 + 翻译客服接口联动方案|日系海淘平台中文友好化开发实战
前端·交互
UXbot15 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
蓝速科技15 天前
蓝速科技 AI 数字人部署与交互实战指南
人工智能·科技·交互
夜郎king15 天前
Axure 原型落地 HTML:基于 Trae Solo 实现 GIS 多级行政区划切换全流程实践
axure·trae solo·gis可视化
UXbot15 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app
Resurgence_zc16 天前
openGauss 资源池化主备页面交互流程梳理
网络·交互·数据库开发
potion()16 天前
浏览器用户画像分析-大屏静态布局制作+数据接入+交互设置
交互·助睿数智·商业数据分析
LONGZETECH16 天前
无人机仿真教学软件选型实战:5 个硬核技术维度,避开实训建设踩坑
3d·无人机·交互·cocos2d