Axure9.0让条形图实现动态交互(鼠标悬停高亮 + 显示详情卡片)

核心需求:鼠标悬停在条形上时,条形颜色加深、轻微放大,并显示「功能名称 + 进度」详情,提升数据可读性。

静态展示操作链接

Axure 9.0 条形图绘制超详细教程:静态展示-CSDN博客

操作步骤:

制作高亮条形:

  • 复制对应条形(如核心功能 A),设置「缩放」→「105%」(轻微放大),填充色改为加深版(#1735A2),添加阴影(模糊 5px、颜色 #00000010),命名为 "条形 1 - 高亮",默认隐藏(右侧「样式」→「隐藏」);

绘制详情卡片:

  • 拖出「矩形」(圆角 8px),尺寸 120×50px,填充色 #fff,边框 #eee,阴影(模糊 5px、颜色 #00000010);
  • 卡片内添加 2 个文本元件,分别对应「功能名称」「进度」,字体 11px、颜色 #FFFFFF,默认隐藏;

绑定交互事件:

  • 添加热区,覆盖住原始条形 "理论课完成程度",点击右侧「交互」→「添加事件」→「鼠标悬停时」;
  • 动作 1:「显示」"条形 1 - 高亮",动画「淡入」「300 毫秒」;
  • 动作 2:「显示」详情卡片,动画「淡入」「300 毫秒」;
  • 添加「鼠标离开时」事件:「隐藏」高亮条形和详情卡片,动画「淡出」「300 毫秒」;
  • 重复上述步骤,为其余 4 个条形绑定相同逻辑。

效果图

相关推荐
传奇开心果编程12 小时前
【SwiftUI提高练中学】第8课 网络层架构:拦截器、重试、缓存与离线优先
学习·macos·ui·ios·swiftui
传奇开心果编程13 小时前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
我命由我1234514 小时前
Photoshop - Photoshop 矢量蒙版
学习·职场和发展·产品运营·求职招聘·职场发展·产品经理·photoshop
大圣编蚕15 小时前
Rancher证书轮换过期导致不能访问UI问题处理
ui·rancher
可乐ea15 小时前
Agent 评测换判据:用终态数据库状态判定任务是否完成
数据库·ui·oracle·mcp工具·agent评测·终态断言·智能体可靠性
我命由我1234517 小时前
Photoshop - Photoshop 面板和菜单
学习·职场和发展·产品运营·求职招聘·职场发展·产品经理·photoshop
c萱19 小时前
AI产品经理——03Prompt Engineering提示词工程
ai·prompt·aigc·产品经理·ai编程·ai-native
我命由我1234519 小时前
Photoshop - Photoshop 使用仿制图章工具移除对象
学习·职场和发展·产品运营·求职招聘·职场发展·产品经理·学习方法
传奇开心果编程19 小时前
【Compose Multiplatform 跨端开发学与练】第3课 布局与组件
android·windows·学习·ui·ios·kotlin·composer
rolt21 小时前
智能机床-06 机械 ISO 23704-4-2026-用UML表示的行业标准
软件工程·产品经理·架构师·uml