axure文本框里面怎么插入放大镜那个图标？

1.准备工作

打开Axure7.0（纯属废话，大家这么聪明都知道的~嘻嘻~）

左侧工具栏，拖拉出矩形框2个

一个矩形框设置成200*200大小，一个设置成400*400

两张图片，一张缩略图（命名小图），一张放大图（命名大图），两张图片最好是等比的，看着效果更佳

将错略图放到200*200的矩形框内

准备工作暂时告一段落。

看看放大图片必要的元素还缺少些什么？嗯，就是放大镜！Of course，也有很牛掰的不用放大镜，鼠标放到缩略图上就放大图片，原理都是相同的啦，我这里放个放大镜，方便看效果~~~~~~

2.添加放大镜

左侧工具栏，拖拉出矩形框一个

将矩形框设置成40*40大小

边框设置成绿色（颜色随你喜欢），填充设置成透明（这个必须，不然就看不到后面图片了哦）

将放大镜矩形框移动到缩略图片上

Yeah，放大镜制作完成，来看下预览效果。咦？放大镜不能移动，What’s wrong？？？？？？Calm down，还没有给放大镜添加动态效果。

放大镜动画效果：鼠标移入图片显示放大镜；鼠标移出隐藏放大镜；放大镜跟随鼠标移动；

点击选中缩略图

右侧交互区添加交互事件，选择“鼠标移入时”，显示“放大镜”

再添加交互事件，选择“鼠标移出时”，隐藏“放大镜”

在页面交互区添加页面交互事件，选择“页面鼠标移动时”，移动“放大镜”，设置x和y距离，一定要选择“绝对距离”（不这么做的你看看是什么效果，认真脸），添加函数即点击fx打开变量面饭，插入函数Cursor.x和Cursor.y（为了使鼠标显示在放大镜中间样子更好看，设了Cursor.x-20和Cursor.y-20，猜猜为什么是-20而不是-10或-60？就是这么调皮，啦啦啦~）

来来来预览一下。嗯，移动可以了，但是一开始放大镜就显示出来了，这你逗人玩吗？NoNoNo，忘记一步。

右键放大镜，选择隐藏

好

第一步，在元件库里的基本元件找到“矩形1”，拖曳一个到“index”页面，作为手机边框，如下图所示：

第二步，合理找到手机图标元件，分别排列在矩形框中，如下图所示：

第三步，根据手机里功能图标的颜色，分别设置这些图标的填充色，如下图所示：

第四步，有时看到图标就知道该图标的功能，但是为了更好表示功能作用，可以在图标下方添加功能描述，如下图所示：

5

第五步，手机右上方有个电池显示图标，这里添加一个用于显示电池电量，如下图所示：

6

第六步，手机右上方除了显示电池，还有信号强弱图标和wifi图标，如下图所示：

---