首页
我的博客
写文章
登录
注册
网站导航
互站首页
源码集市
服务市场
域名交易
网站交易
任务大厅
商家专区
互站社区
Axure8 教程:两种图片交互效果(悬浮放大和左右滑动切换
原创
纤纤露
2022-07-05 09:57:50
评论(0)
阅读(409)
这次为大家分享的是Axure制作的图片悬浮放大及左右滑动切换两种常见的交互效果 ![](https://img.huzhan.com/blog/20220705/20221656985769998.png) ![](https://img.huzhan.com/blog/20220705/20221656985826446.png) 预览及下载地址: https://89nm5z.axshare.com 一、悬浮放大效果 1、制作元件 拖入两个【动态面板】元件,设置两张图片 ![](https://img.huzhan.com/blog/20220705/20221656985769998.png) 2、设置交互 点击其中一个动态面板,选择图片,设置图片的【鼠标移入时】事件和图片的【鼠标移出时】事件 ![](https://img.huzhan.com/blog/20220705/20221656985962235.png) ![](https://img.huzhan.com/blog/20220705/20221656985972848.png) 同理设置另一张图片的【鼠标移入时】事件和图片的【鼠标移出时】事件 ![](https://img.huzhan.com/blog/20220705/20221656986018227.png) 图片放大倍数根据设计需要设定,此案例为放大图片1.2倍 二、左右滑动切换 1、制作元件 拖入【动态面板】元件,命名为”图片“,点击进入后拖入【动态面板】元件,命名为”拖入层“ 点击进入设置图片,左侧图片命名为”左图“,图片大小设置为200*200;中间图片命名为”中间“,图片大小设置为230*230;右侧图片命名为”右图“,图片大小设置为200*200 ![](https://img.huzhan.com/blog/20220705/20221656985783338.png) 2、设置交互 选择动态面板【图片】,设置【拖动时】事件 ![](https://img.huzhan.com/blog/20220705/20221656985913807.png) 选择动态面板【图片】,设置【拖动结束时】事件 ![](https://img.huzhan.com/blog/20220705/20221656986155806.png) 根据动态面板【拖动层】的x数值进行判断设置 ![](https://img.huzhan.com/blog/20220705/20221656986099752.png)
关注下面的标签,发现更多相似文章
本文TAG标签:
分享
QQ分享
微博分享
微信扫一扫
收藏
axure8.0教程动态面板图片交互效果
上一篇:Axure8.0教程:动态柱状图表—排名图(中继器)Axure8.0教程:动态柱状图表—排名图(中继器)
下一篇:做网校平台搭建时应先了解这三个关键点Axure8.0教程:动态柱状图表—排名图(中继器)
您好,
请先
登录
!请文明评论,不得违反国家法律法规!
已有
0
条评论
纤纤露
关注
TA的店铺
21
文章
8171
人气
0
评论
0
粉丝
专注Axure设计的产品经理
Ta的最新文章
Axure案例分享—进度条(附下载地址)
Axure教程—滚动加载(中继器 )
Axure教程—表格(中继器)
Axure教程—菜单(中继器)
Axure教程—堆积面积图
标签大全
axure8.0教程动态面板多级联动
(2)
axure8.0教程
(2)
axure中继器axure教程axure
(1)
axure8.0教程动态面板
(1)
axure8.0教程动态面板axure中
(1)
axure8.0教程动态面板多级联动下拉
(1)
axure
(1)
axure8.0教程中继器动态柱状图
(1)
axure8.0教程动态面板图片交互效果
(1)
axure8.0教程动态面板多级联动 中
(1)
axure8.0教程axure中继器
(1)
axure8.0教程axure菜单axu
(1)
axure8.0教程滑块步进器
(1)
axure8.0教程动态仪表盘
(1)
axure教程 axure直方图
(1)
axure教程axure动态面板图片效果
(1)
axure8.0教程 axure单色面积
(1)
axure教程axure堆积面积图axu
(1)
axure axure中继器axure教
(1)
阅读目录
已有 0 条评论