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

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

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

相关推荐
人生百态,人生如梦1 天前
情感交互仿生人从技术到落地构想3——技术交流贴(2026.7)
人工智能·机器学习·人机交互·交互·具身智能
Designerpupu1 天前
PS2026 移除工具灰色无法点击怎么办?2026 最新故障解决教程
photoshop·ps·nano banana·创成式填充·移除工具·ps2026·智能擦除
沉迷学习 日益消瘦1 天前
4 净资产趋势可视化:SVG 图表 + 手势交互 + 降采样算法
算法·交互
招风的黑耳2 天前
高标准农田信息化管理系统实战应用大纲
智慧农业·axure·农田管理·高标准农田
工业HMI实战笔记2 天前
【无标题】
大数据·人工智能·ui·自动化·人机交互·交互
在水一缸3 天前
深度解析 GPT-Live:实时语音交互的技术变革与实践指南
gpt·llm·交互·多模态·端到端·实时语音交互·gpt-live
工业HMI实战笔记4 天前
【拯救HMI】:低碳制造:自动化技术如何助力企业节能降耗
运维·前端·自动化·交互·制造
人生百态,人生如梦4 天前
情感交互仿生人从技术到落地构想2——技术交流贴(2026.7)
人工智能·机器人·人机交互·交互
元岳数字人小元4 天前
数字人系统源码:决定一体机长期运维稳定性的核心因素
运维·开源·人机交互·交互·源代码管理
人生百态,人生如梦5 天前
情感交互仿生人从技术到落地构想1——技术交流贴(2026.7)
人工智能·机器人·人机交互·交互