axure图片放大器源文件

system

软件标签:  axure   图片放大
axure图片放大器源文件是一个商务网站适用的图片放大文件，意思就是用户在滑动鼠标经过产品图片时，可以实现放大图片的功能，这样有利于用户体验，小编提供这个源文件，供大家参考学习。
相关介绍
图片放大器的典型场景是电子商务网站，鼠标经过缩略图时，显示产品放大图片，供用户查看细节。这里是个简单的例子，鼠标经过时显示放大图片，拖动绿色正方形框并移动，会显示对应位置的放大图片。
axure源文件说明
当然，这里并没有真正放大图片，只是用两张图片来表示，一张表示小图，一张表示放大后的图片。可学习的知识点如下：

动态面板的拖动事件

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

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

部件的移动范围的限制，这是axure8里的新用法
使用方法
一、准备图片资源

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





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

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

正方形拖动事件

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





约束移动范围

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

[[-lvar1.x*rate]]，[[-lvar1.y*rate]]





计算大图片移动位置

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





计算图片缩放比率

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

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





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

这个小例子里需要介绍的内容基本涉及了

https://blog.51cto.com/u_16099270/9147646