快好知 kuaihz

Axure教程 | 图片放大器

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

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

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

动态面板的拖动事件

拖动动态面板时同步移动图片

全局变量与局部变量的用法

部件的移动范围的限制,这是axure8里的新用法

一、准备图片资源

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

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

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

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

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

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

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

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

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

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:Axure教程 图片放大器  放大器  放大器词条  教程  教程词条  图片  图片词条  Axure  Axure词条  
原型

 AXURE教程:饼图

你知道如何用AXURE做一个饼图吗?一起来看看吧~本文将教大家如何用AXURE做一个饼图。在线演示地址:http://ije8g9.axshare.cn/#g=...(展开)

原型

 Axure教程:巧用中继器模拟A...

本教程需要一定的Axure使用基础,重要知识点:中继器、动态面板、函数的使用。前言一般聊天界面一般包含下列元素:导航栏及其操作按钮。聊天气泡,包含聊天双方的气泡...(展开)

原型

 Axure教程:实现类网易云音乐...

文章基于最新版的网易云音乐IOS APP撰写本教程,本文将详细讲述音乐识别及音乐播放界面的交互效果。话不多说,按惯例先上实现的效果:点击体验最新效果原型效果在5...(展开)