欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

Axure怎么制作图片局部放大的效果?

程序员文章站 2023-08-14 13:56:34
Axure怎么制作图片局部放大的效果?...

axure中想要实现一个效果,就是当鼠标移动到图片上时,展示放大的图片细节,该怎么制作局部放大效果呢?下面我们就来看看详细的教程。

Axure怎么制作图片局部放大的效果?

新建一图片,导入喜欢的图,命名为pic,尺寸为400*250;(图片尺寸可自定义,展示受限百度限制)

新建一”矩形“,命名为board,尺寸为200*125;并设定填充颜色为#00ff00,不透明:20%;设置为“隐藏”;置于”图片:pic”上方;如下图所示:

Axure怎么制作图片局部放大的效果?

选择“矩形:board”,“图片:pic”,组合,命名为area

另新建一“动态面板”,命名为display,尺寸为400*250;插入一张新图,命名为bigpic,尺寸为800*500;设置“动态面板:display“为”隐藏“;

布局如下图所示:

Axure怎么制作图片局部放大的效果?

以下分别设置”组合:area“的”鼠标移动时“和”鼠标移出时“的交互的动作~

先是简单的”鼠标移出时“的交互动作:

隐藏”动态面板:display“;

隐藏”矩形:board“;

Axure怎么制作图片局部放大的效果?

Axure怎么制作图片局部放大的效果?

鼠标移动时“的交互动作:

Axure怎么制作图片局部放大的效果?

动作1:

显示”动态面板:display“;

显示”矩形:board“;

Axure怎么制作图片局部放大的效果?

动作2:

移动”矩形:board“;

设置移动的界限;

Axure怎么制作图片局部放大的效果?

其中,移动设置为“到达”;

设置x值为[[cursor.x-target.width/2]],y值为[[cursor.y-target.height/2]];如下图所示:

Axure怎么制作图片局部放大的效果?

Axure怎么制作图片局部放大的效果?

相关标签: Axure 图片