1.准备工作
- 左侧工具栏,拖拉出一个图片框
- 设置成200*200大小,导入图片,命名小图。
- 再拖拉出一个动态面板,设置成200*200
- 双击state1,拖拉出一个图片框设置
- 500*500大小,导入图片,命名为大图
- 两张图片最好是等比的,看着效果更佳
放大的图片因为是要在指定区域内显示,因此我们将图片转成动态面板,并取消“Fit to Content”选项,对应中文版的就是自动调整为内容尺寸的选项,这样在可见区域范围外将不可见。
2.添加放大镜
- 左侧工具栏,拖拉出矩形框一个
- 将矩形框设置成80*80大小
- 边框设置成任意颜色,填充设置成透明
- 将放大镜矩形框移动到小图片上
3.设置显示隐藏
- 隐藏放大镜和动态面板
- 将放大镜和小图设为一个组合
- 当鼠标移入组合时,显示放大镜和放大图
- 当鼠标移出组合时,隐藏放大镜和放大图
4.放大镜跟随鼠标移动
-
点击选中组合,增加交互事件“鼠标移动时”
-
移动“放大镜”,设置x和y距离
-
一定要选择“绝对距离”,添加函数即点击fx打开变量面饭,插入函数Cursor.x和Cursor.y(为了使鼠标显示在放大镜中间样子更好看,设了Cursor.x-40和Cursor.y-40,40是放大镜宽度的一半)
-
设置放大镜的拖动范围,这里的范围限制使用了axure8的新特性 Add boundary,它可以约束部件只能在原图的显示范围之内移动
5.添加放大图
-
点击选中组合,双击交互事件“鼠标移动时”的case1
扫描二维码关注公众号,回复: 3996130 查看本文章 -
移动放大图(勾选的是“大图”图片,别勾选成动态面板!!!!)
-
设置移动距离x和y,再次强调选择“绝对距离”,点击fx添加函数式
-
新增局部变量LVAR1,选择“元件”=小图,插入函数式[[(LVAR1.left-Cursor.x+20)*2.5]],同理设置y的函数式[[(LVAR1.top-Cursor.y+20)*2.5]]
.left代表小图的x坐标,.top代表小图的y坐标,Cursor.x和.y代表放大镜当前停留位置的x和y坐标(前面设了-40,所以上面有+40)。(小图坐标-放大镜坐标)放大倍数=当前放大图该显示的坐标,上面函数式的2.5就是图片的放大倍数,大图width/动态面板width=小图width/放大镜width=2.5
6.效果展示
7.添加小图切换效果
- 点击中继器,将原有的删除,替换成图片
- 然后回到主页面,点击中继器样式,将中继器的布局设置为“水平”,设置间距为行0,列10
- 添加要切换的图片,点击属性(要显示的图片是三个尺寸,第一个是左下中继器切换的60x60的小图,第二个是左上的200x200的小图,第三个是右边500x500的大图)。
- 横向添加3种格式的图片,第一列为序号。每一行导入的图片是相同的,想切换几张图片,就添加几列。选中某一个,右击“导入图片”,就可以添加想要的图片
- 然后点击“中继器”,设置【每项加载时】事件,设置小的切换图片
- 我们要的效果是,点击每一张中继器缩略图,小图和大图都跟着变化,所以,在中继器点击进入的图片上添加【鼠标单击时】事件
8.小图切换效果显示