Axure中想要实现一个效果,就是当鼠标移动到图片上时,展示放大的图片细节,该怎么制作局部放大效果呢?下面我们就来看看详细的教程。
原型设计工具Axure RP Pro 8.1特别版 中文汉化特别版(附汉化包+注册码+安装教程)
- 类型:辅助设计
- 大小:90.5MB
- 语言:简体中文
- 时间:2018-05-24
新建一图片,导入喜欢的图,命名为pic,尺寸为400*250;(图片尺寸可自定义,展示受限百度限制)
新建一”矩形“,命名为board,尺寸为200*125;并设定填充颜色为#00FF00,不透明:20%;设置为“隐藏”;置于”图片:pic”上方;如下图所示:
选择“矩形:board”,“图片:pic”,组合,命名为area
另新建一“动态面板”,命名为display,尺寸为400*250;插入一张新图,命名为bigpic,尺寸为800*500;设置“动态面板:display“为”隐藏“;
布局如下图所示:
以下分别设置”组合:area“的”鼠标移动时“和”鼠标移出时“的交互的动作~
先是简单的”鼠标移出时“的交互动作:
隐藏”动态面板:display“;
隐藏”矩形:board“;
”鼠标移动时“的交互动作:
动作1:
显示”动态面板:display“;
显示”矩形:board“;
动作2:
移动”矩形:board“;
设置移动的界限;
其中,移动设置为“到达”;
设置X值为[[Cursor.x-Target.width/2]],Y值为[[Cursor.y-Target.height/2]];如下图所示:
上一页12 下一页 阅读全文
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)