Axure8 教程:两种图片交互效果(悬浮放大和左右滑动切换)
这次为大家分享的是图片的悬浮放大及左右滑动切换两种交互效果预览及下载地址:https://6rkewz.axshare.com一、悬浮放大效果1、制作元件拖入两个【动态面板】元件,设置两张图片2、设置交互点击其中一个动态面板,选择图片,设置图片的【鼠标移入时】事件和图片的【鼠标移出时】事件同理设置另一张图片的【鼠标移入时】事件和图片的【鼠标移出时】事件图片放大倍数根据设计需要设定,此案例为放大图片
这次为大家分享的是图片的悬浮放大及左右滑动切换两种交互效果

预览地址:https://89nm5z.axshare.com
下载地址:https://download.csdn.net/download/weixin_43516258/86838775
一、悬浮放大效果
1、制作元件
拖入两个【动态面板】元件,设置两张图片
2、设置交互
点击其中一个动态面板,选择图片,设置图片的【鼠标移入时】事件和图片的【鼠标移出时】事件


同理设置另一张图片的【鼠标移入时】事件和图片的【鼠标移出时】事件

图片放大倍数根据设计需要设定,此案例为放大图片1.2倍
二、左右滑动切换
1、制作元件
拖入【动态面板】元件,命名为”图片“,点击进入后拖入【动态面板】元件,命名为”拖入层“
点击进入设置图片,左侧图片命名为”左图“,图片大小设置为200200;中间图片命名为”中间“,图片大小设置为230230;右侧图片命名为”右图“,图片大小设置为200*200

2、设置交互
选择动态面板【图片】,设置【拖动时】事件

选择动态面板【图片】,设置【拖动结束时】事件
设置变量LVAR1为元件拖动层,
根据动态面板【拖动层】的x数值进行判断设置

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)