域名百科吧

 找回密码
 立即注册
搜索
域名百科吧 首页 营销杂谈 查看内容

Axure教程 | 图片放大器

2017-4-11 09:52| 责任编辑: ymbk8| 查看: 150| 评论: 0

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

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

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

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

  1. 动态面板的拖动事件
  2. 拖动动态面板时同步移动图片
  3. 全局变量与局部(79个被App Store拒绝的理由)变量的用法
  4. 部件的移动范围的限制,这是axure8里的新用法

一、准备图片资源

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

(惠普分拆前传:一个不作不会死的故事)

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

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

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

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

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

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

(《PPT演示之道》思维导图)

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

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

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

作者:Axure原型设计工场,来自:图片放大器 | 人人都是产

声明:博客内容除标记原创字样以外内容,均来自网络转载,版权归原作者所有,如涉及版权问题请及时联系处理。

注意啦:淘大米域名抢注,成功率高达99%;购买已备案域名、高PR、高权重、高外链、百度V认证域名就上淘大米(taodami.com.cn)。点击进入:

淘大米官网


鲜花

握手

雷人

路过

鸡蛋

随机推荐

热门图片
  • 好看又好耍,这款全新上线的游戏,让你体验
  • 百度谭待出席齐家网2017全国家装行业峰会,
  • 继公有云通过评估后,西部数码再获工信部全
  • 网站SEO更新文章6原则,做好避免无用功
  • 熊掌公开课北京首开讲,百度搜索带您玩转熊
发布主题 客服中心 搜索 官方QQ群

河南网络警察报警平台 公共信息安全网络监察 河南经营性网站备案信息 河南不良信息举报中心 中国文明网传播文明

返回顶部