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制作放大镜效果相关推荐

  1. 手机网站按住放大图片_如何用PPT制作放大镜效果?ppt怎样实现放大镜效果?PPT放大镜效果教学?...

    有朋友问笔书,如何使用Microsoft Office PowerPoint制作放大镜效果?下面笔书将这个PPT制作小技巧分享给大家.教会大家,ppt怎样实现放大镜效果?首先:我们插入一张图片,将放大 ...

  2. Axure制作菜单栏效果

    如何用Axure制作上面效果的菜单栏?直接上步骤: 新建1个母版(菜单栏模板)和5个页面(页面1--页面5),当点击菜单栏按键时,对应弹出页面效果 [母版制作]制作一个菜单框,拖一个矩形并输入&quo ...

  3. html实现ppt缩放效果,ppt放大镜效果

    如何用PPT变形快速制作放大镜效果 选中需要制作的图形 然后选择自定义动画 选择放大镜效果 怎么在ppt中添加放大镜的效果图 ppt的放大镜在哪里您要找的是放大PPT的方法吗? 可以从右下角的调整PP ...

  4. [原型设计]Axure制作首页轮播图片切换效果

    1.新建Axure PR文件,取名"Axure制作首页轮播图片切换效果" 2.获取素材,进入36Kr官网主页,获取轮播图片素材. 获取素材 3.拖拽动态面板控件Dynamic Pa ...

  5. Axure制作手机UI原型之界面滑动滚动效果

    用Axure制作手机界面原型的时候,往往会遇到像Android中listview那种页面,手指在界面上滑动,页面也就跟随滚动,拖拽到底部或者顶部的时候还有个回弹效果,如何在Axure之中模拟这种滚动呢 ...

  6. 仿淘宝商品放大展示效果制作(放大镜效果)

    如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...

  7. 【jQuery】前端项目实践案例6——制作产品放大镜效果(仿京东淘宝图片效果)

    使用jQuery制作产品放大镜效果实现效果: 使用jQuery制作产品放大镜效果实现原理: 通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动. 使用jQuery制作产品放大镜 ...

  8. 使用Axure制作手风琴菜单

    Axure在页面设计这一块起到了很大作用,它不仅可以将客观的文本改变为直观的演示模板,还可以对于页面的各个方面进行UI设计美化页面等等. 例如设计一个网站肯定少不了菜单栏.菜单栏的样式很多,有点击显示 ...

  9. Axure制作微信APP原型(三):消息+个人模块----聊天、浮窗、登录设备、个人主页、更多信息

    Axure制作微信APP原型(三) APP原型设计是产品经理需要做的工作之一,大家有这个方向和兴趣的可以自己下载一个Axure软件试一下. 可以用已有的APP模型参考设计学习以下,学学人家的界面是怎么 ...

最新文章

  1. python使用fpdf生成pdf文件章节(chapter),包含:页眉、页脚、章节主题、数据排版等;
  2. php sql server配置文件路径,云服务器初始化 第六章:更改MySQL数据文件存放路径...
  3. Ubuntu Server 16.04 LTS上给Docker配置镜像加速器
  4. Collection的使用 对象 java
  5. 3-AIV--使用ContentProvider获得所有图片路径
  6. 在Python中写入文件时,权限被拒绝错误
  7. linux 下nm命令输出,Linux nm命令介绍
  8. iOS 数组模型排序
  9. Docker-compose部署gitlab中文版
  10. 传智播客Java 关键字,标识符,注释
  11. 你还在对着手机干唱?k歌神器挑选法则
  12. matlab使用parpool加速蒙特卡洛仿真
  13. 英雄联盟加载的时候特卡,排查记录:win10那些破玩意
  14. oracle最新版本18c的介绍,Oracle Database 18c已经发布及新特性介绍
  15. VR AR应用开发交流大会在天津成功举办 京津VR AR企业交流心得共促合作
  16. 中国化肥产业发展现状及趋势分析,化肥产能过剩情况得到缓解「图」
  17. 获取指定日期的月份的第几个星期几是几号
  18. graphpad图片怎么导出矢量图_Graphpad Prism 8如何绘制生存曲线
  19. 回归综合案例——利用回归模型预测鲍鱼年龄
  20. 9个好用的搜索小技巧

热门文章

  1. matlab计算传热学程序,《哈尔滨工程大学传热学大作业数值计算matlab程序内容》.pdf...
  2. 细思恐极,插上U盘就开始执行Python代码
  3. 锤子科技子公司变更:温洪喜取代罗永浩成法定代表人
  4. 新高考计算机专业选什么科目,2020新高考金融高考选什么 科目怎么选
  5. python字符串定义变量名_python基础-变量和字符串
  6. java常见并发容器
  7. Pytorch 中retain_graph的用法
  8. MQTT协议:Retain (保留消息)功能分析小结
  9. 腾讯安全入选《2020年数据安全典型实践案例》
  10. 学术氛围极佳,北邮网安录取人数逐年攀升~