Axure制作放大镜效果

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
移动放大图（勾选的是“大图”图片，别勾选成动态面板！！！！）
设置移动距离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.小图切换效果显示

Axure制作放大镜效果相关推荐

手机网站按住放大图片_如何用PPT制作放大镜效果？ppt怎样实现放大镜效果？PPT放大镜效果教学？...
有朋友问笔书,如何使用Microsoft Office PowerPoint制作放大镜效果?下面笔书将这个PPT制作小技巧分享给大家.教会大家,ppt怎样实现放大镜效果?首先:我们插入一张图片,将放大 ...
Axure制作菜单栏效果
如何用Axure制作上面效果的菜单栏?直接上步骤: 新建1个母版(菜单栏模板)和5个页面(页面1--页面5),当点击菜单栏按键时,对应弹出页面效果 [母版制作]制作一个菜单框,拖一个矩形并输入&quo ...
html实现ppt缩放效果,ppt放大镜效果
如何用PPT变形快速制作放大镜效果选中需要制作的图形然后选择自定义动画选择放大镜效果怎么在ppt中添加放大镜的效果图 ppt的放大镜在哪里您要找的是放大PPT的方法吗? 可以从右下角的调整PP ...
[原型设计]Axure制作首页轮播图片切换效果
1.新建Axure PR文件,取名"Axure制作首页轮播图片切换效果" 2.获取素材,进入36Kr官网主页,获取轮播图片素材. 获取素材 3.拖拽动态面板控件Dynamic Pa ...
Axure制作手机UI原型之界面滑动滚动效果
用Axure制作手机界面原型的时候,往往会遇到像Android中listview那种页面,手指在界面上滑动,页面也就跟随滚动,拖拽到底部或者顶部的时候还有个回弹效果,如何在Axure之中模拟这种滚动呢 ...
仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
【jQuery】前端项目实践案例6——制作产品放大镜效果（仿京东淘宝图片效果）
使用jQuery制作产品放大镜效果实现效果: 使用jQuery制作产品放大镜效果实现原理: 通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动. 使用jQuery制作产品放大镜 ...
使用Axure制作手风琴菜单
Axure在页面设计这一块起到了很大作用,它不仅可以将客观的文本改变为直观的演示模板,还可以对于页面的各个方面进行UI设计美化页面等等. 例如设计一个网站肯定少不了菜单栏.菜单栏的样式很多,有点击显示 ...
Axure制作微信APP原型（三）：消息+个人模块----聊天、浮窗、登录设备、个人主页、更多信息
Axure制作微信APP原型(三) APP原型设计是产品经理需要做的工作之一,大家有这个方向和兴趣的可以自己下载一个Axure软件试一下. 可以用已有的APP模型参考设计学习以下,学学人家的界面是怎么 ...

Axure制作放大镜效果

Axure制作放大镜效果相关推荐

最新文章

热门文章