Axure8 教程：两种图片交互效果（悬浮放大和左右滑动切换）
2022-04-19 本文已影响0人
0a08f2b68cfa
这次为大家分享的是图片的悬浮放大及左右滑动切换两种交互效果
预览及下载地址：https://6rkewz.axshare.com
一、悬浮放大效果
1、制作元件
拖入两个【动态面板】元件，设置两张图片
2、设置交互
点击其中一个动态面板，选择图片，设置图片的【鼠标移入时】事件和图片的【鼠标移出时】事件
同理设置另一张图片的【鼠标移入时】事件和图片的【鼠标移出时】事件
图片放大倍数根据设计需要设定，此案例为放大图片1.2倍
二、左右滑动切换
1、制作元件
拖入【动态面板】元件，命名为”图片“，点击进入后拖入【动态面板】元件，命名为”拖入层“
点击进入设置图片，左侧图片命名为”左图“，图片大小设置为200*200；中间图片命名为”中间“，图片大小设置为230*230；右侧图片命名为”右图“，图片大小设置为200*200
2、设置交互
选择动态面板【图片】，设置【拖动时】事件
选择动态面板【图片】，设置【拖动结束时】事件
设置变量LVAR1为元件拖动层，
根据动态面板【拖动层】的x数值进行判断设置
