Axure制作放大镜效果

文章目录

• Axure制作放大镜效果
• 前言
• 一、先做出当鼠标放在小图左上角时，右边的动态面板能够放大显示出这个位置？
• • 1.先设置图片。
  • 2.添加一个遮罩。
  • 3.显示隐藏设置
• 二、实现鼠标到哪个位置，面板就显示哪个位置的放大画面。
• • 1.遮罩随鼠标的移动而移动
  • 2.实现放大
• 总结

前言

首先你需要有两张照片，一张小图，一张大图，最好是成比例的。效果更好。

一、先做出当鼠标放在小图左上角时，右边的动态面板能够放大显示出这个位置？

1.先设置图片。

首先，拖拉出一个图片框，根据自己图片的实际情况设置大小；我这里是设置成500500大小，导入图片，命名小图。接着，拉出一个动态面板，命名面板，设置成和小图一样大小，也是500500；接着双击动态面板，再双击state1后，拉出一个图片框设置比小图大的尺寸大小；我这里是设置成1000*1000大小，导入图片，命名为大图。大图和小图最好是成比例的，看着效果更好。

2.添加一个遮罩。

拉出一个矩形框，命名小图，可以设置成比小图小的成比例的大小，我这里设置成250*250；*接着设置颜色，将填充设置成透明。将遮罩矩形框放到小图的左上角。

3.显示隐藏设置

当鼠标放到小图上时，显示遮罩、动态面板和大图。

当鼠标离开小图的范围时，隐藏遮罩、动态面板和大图。

二、实现鼠标到哪个位置，面板就显示哪个位置的放大画面。

1.遮罩随鼠标的移动而移动

设置全局变量：在状态栏的项目—>全局变量—>+—>输入全局变量的名称
双击页面—>双击页面载入时—>设置变量值—>选中刚才的变量名—>点fx设置值

设置遮罩的移动范围：点击遮罩—>双击鼠标移动时—>移动—>大图
一定要选绝对值

X输入的范围

Y输入的范围

2.实现放大

点击遮罩—>双击鼠标移动时—>移动—>遮罩—>添加边界
一共四个边界，top、bottom、left、right。

四个都要设置fx、以top为例

总结

过程也不是很复杂，但需要特别注意在设置时，都要改成是绝对位置，不是相对位置。