• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程 | 图片放大器

Axure教程 | 图片放大器

作者: @Axure原型设计工场  字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure鼠标移入放大,axure放大缩小快捷键,axure怎么放大缩小,axure放大缩小,axure图片放大等相关知识, @Axure原型设计工场 希望在学习及工作中可以帮助到您

tupianfangdaqi

图片放大器的典型场景是电子商务网站,鼠标经过缩略图时,显示产品放大图片,供用户查看细节。这里是个简单的例子,鼠标经过时显示放大图片,拖动绿色正方形框并移动,会显示对应位置的放大图片。

单击这里查看在线演示(内附源文件下载)

当然,这里并没有真正放大图片,只是用两张图片来表示,一张表示小图,一张表示放大后的图片。可学习的知识点如下:

  1. 动态面板的拖动事件
  2. 拖动动态面板时同步移动图片
  3. 全局变量与局部变量的用法
  4. 部件的移动范围的限制,这是axure8里的新用法

一、准备图片资源

准备好两张图片,一张原图小一点,一张放大后的图片,图片比例保持一致。在原图上放一下矩形框,调整大小为正方形,设置边框为绿色,背景为透明。为了支持拖动事件,将正方形转成动态面板。放大的图片因为是要在指定区域内显示,因此我们将图片转成动态面板,并取消“Fit to Content”选项,对应中文版的就是取消自动适应动态面板内容大小的选项,这样在可见区域范围外将不可见。

准备图片资源

二、添加正方形动态面板的拖动事件

只需要处理拖动事件即可,拖动正方形时,移动正方形到当前鼠标位置。

正方形拖动事件

正方形拖动范围限制在原图的显示范围之内,这里的范围限制使用了axure8的新特性 Add boundary,它可以约束部件只能在某个范围内移动,例如你要做个音量调节器,你可以限制音量大小只在某个范围移动。

约束移动范围

下面就是在移动正方形时,同时移动放大的图片到指定位置,这样看起来就像是在给原图做放大操作,计算放大图片的位置如下:

[[-LVAR1.x*rate]],[[-LVAR1.y*rate]]

计算大图片移动位置

其中rate是放大图片与原图的比率,如下计算:

计算图片缩放比率

三、初始化全局变量和设置放大图片大小

使用了rate来保存放大图片与原图片之间的放大比率,页面加载时计算这个比率,并设置放大图片的放大倍数:

初始化全局变量和设置放大图片大小

这个小例子里需要介绍的内容基本涉及了,详细可查看在线演示并下载源文件自己看一下吧。

您可能想查找下面的文章:

  • Axure教程 | 图片放大器

相关文章

  • 2017-06-13Axure原型设计之轮播图
  • 2017-06-13三步教你 Axure 原型变身 EXE 程序
  • 2017-06-13Axure教程:限制输入框输入字数
  • 2017-06-13Axure教程:微信聊天列表原型制作(一)
  • 2017-06-14Axure8.0小案例:电动机原型
  • 2017-06-14Axure教程:动态面板实现广告循环播放
  • 2017-06-14axure九宫格拼图的实现原理
  • 2017-06-13Axure教程:原型设计之侧滑菜单
  • 2017-06-13Axure教程:商品详情页产品图效果展示
  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(下)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:12306图片验证码的实现(随机可验证)
    • Axure原型技巧 | 这回我们模拟下键盘输入
    • 三步教你 Axure 原型变身 EXE 程序
    • Axure实例:创建浏览器顶部固定菜单及子菜单
    • Axure 7高保真还原Web首页布局和交互教程
    • Axure教程:导航栏和广告悬停效果制作
    • 用Axure 实现“打飞机”,骚年,来一发(上)
    • 用Axure模拟一个数字抽奖的小游戏
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有