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. Spring Boot 工程集成全局唯一ID生成器 Vesta
  2. 我来告诉你【Redis】入门 一
  3. 计算机组成解疑补漏之SDR、DDR及相关计算
  4. 环信ease-sdk-3.3.4_r1 集成用户头像 昵称功能的简单处理方法
  5. 挖洞技巧:支付漏洞之总结
  6. html合并标记,在合并期间在HTML标记之间拉取特定的(文本)间隔
  7. android 查看文件格式,Android-选择并查看任何类型的文件
  8. 在MATLAB中快速画圆(给出圆心坐标和半径就能直接画的那种)
  9. 中国第一程序员求伯君,WPS之父,雷军也佩服的人
  10. 域名和IP地址的区别
  11. abs在c 语言中的作用是什么意思,abs什么意思 c语言中abs是什么意思
  12. C语言打印菱形超详细版本,逐句解析
  13. java最新2019面试题
  14. 大学计算机实验报告u盘启动安装,用U盘安装Win7操作系统实验报告.doc
  15. 打开U盘 提示 服务器无法运行,win10打开u盘提示“系统资源不足 无法完成请求的服务”怎么办...
  16. html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
  17. ClassFactory 无法供应请求的类 (异常来自 HRESULT:0x80040111 (CLASS_E_CLASSNOTAVAILABLE))
  18. springboot+vue+elementUI搭建个人博客
  19. SWING HACKS电子书及范例代码
  20. php mysql抽奖转盘_PHP微信转盘抽奖前后台 数据库完整示例

热门文章

  1. Cloud Computing(8)_实例实现_淘宝双11数据分析与预测
  2. 虫子屏保_我讨厌虫子(咆哮声)
  3. 奢侈品养护平台包大师获3000万元A轮融资,投资方青松基金、不惑创投
  4. .NET中的托管资源与非托管资源
  5. Snapde一个全新的CSV超大文件编辑软件
  6. GIMP for Mac(跨平台图像处理工具)
  7. linux 脚本 提取文件名,powershell-从路径中提取文件名
  8. 传便利蜂获腾讯与高瓴大笔投资 物美接盘部分邻家业务
  9. Android之greenDao(初识greenDao)
  10. 无刷直流电机-通过三相电压波形大概计算电机目前转速