Axure8 教程:两种图片交互效果(悬浮放大和左右滑动切换)

这次为大家分享的是图片的悬浮放大及左右滑动切换两种交互效果


预览及下载地址:89nm5z.axshare.com

一、悬浮放大效果

1、制作元件

拖入两个【动态面板】元件,设置两张图片


2、设置交互

点击其中一个动态面板,选择图片,设置图片的【鼠标移入时】事件和图片的【鼠标移出时】事件


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


图片放大倍数根据设计需要设定,此案例为放大图片1.2倍

二、左右滑动切换

1、制作元件

拖入【动态面板】元件,命名为”图片“,点击进入后拖入【动态面板】元件,命名为”拖入层“

点击进入设置图片,左侧图片命名为”左图“,图片大小设置为200*200;中间图片命名为”中间“,图片大小设置为230*230;右侧图片命名为”右图“,图片大小设置为200*200


2、设置交互

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


选择动态面板【图片】,设置【拖动结束时】事件

设置变量LVAR1为元件拖动层,

根据动态面板【拖动层】的x数值进行判断设置


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容