• 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原型设计工场  字体:[增加 减小] 来源:互联网

本文主要包含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教程 | 图片放大器

相关文章

  • Axure原型设计,单读APP原型分享
  • Axure教程:中继器实现列表到详情页的数据传递
  • Axure教程:如何制作一个不区分大小写的验证码原型?
  • Axure 8.0实例:复选框的应用
  • Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)
  • Axure教程:原型设计之多用户注册登录
  • Axure教程:滑动鼠标页面自动切换(一)
  • Axure PR 7.0 实现页面纵向滑动效果
  • Axure教程:用Axure实现晚会抽奖程序
  • Axure教程:商品详情页产品图效果展示

文章分类

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

最近更新的内容

    • Axure原型设计,单读APP原型分享
    • Axure8.0实例:简单实用的验证码
    • Axure实例:Axure Pro 8制作产品需求文档
    • 中继器实践:双向列表操作
    • Axure教程:微信聊天列表原型制作(二)
    • Axure教程|购物车商品增减删除练习
    • Axure 7高保真还原Web首页布局和交互教程
    • 用Axure模拟一个数字抽奖的小游戏
    • Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)
    • 自定义微信元件库:Axure基本元件的应用(上)

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

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