Axure电商网站图片放大镜结果

文/雨文

为了加深对动态面板的理解，所以尝试了图片放大镜实现结果，中央也碰到一些小题目。该演习重要用到元件追随鼠标移动、动态面板。

原型预览：https://r2cf4u.axshare.com

一、分析

实现结果：

倒推必要实现的功能：

• 放大镜在图片内追随鼠标移动；

• 鼠标移动表现该区域的放大图片；

• 原图片放大。

二、预备

• 必要放大的图片：小图放大不清晰，所以直接选择了清晰的大图作为放大之后的图片，等待放大的底图在该图片基础上等比例缩小。案例图片大小：【760×760】。

• 放大镜：矩形元件，添补颜色，设置不透明度，然后转换为图片。

说明：底图和必要放大的图片大小根据本身必要放大的倍数等比例缩放，放大镜的大小至少为底图大小的一半，案例放大倍数 1 倍，放大的图片【760×760】，底图【380×380】，放大镜【190×190】。

三、交互

思路：鼠标移入底图表现放大镜，设置放大镜追随鼠标移动，然后表现被放大后的图片。

（1）放大图和放大镜分别转换为动态面板，命名与元件名雷同，然后隐蔽，放大图转换为动态面板后更改大小为【380×380】。

（2）页面添加【页面鼠标移动】事件，表现放大镜动态面板，设置放大镜的中心点追随鼠标移动（放大镜宽高的一半网站关键词优化，分别减去坐标xy），所以插入变量时，设置为：[[Cursor.x-95]]。

细致：放大镜移动选择绝对距离。

预览之后会发现，放大镜可以移出底图边界，必要设置不能移出边界，在移动放大镜时添加边界，用到元件函数的top、left、right、bottom函数。

接下来实现图片被放大的结果，表现放大图动态面板河南人事考试，设置移动放大图。

• 放大倍数为1，所以x的移动位置坐标为‘0-（放大镜动态面板.x）*2’；

• 假如页面元素左上角坐标为（0，0），则直接输入表达式‘[[0-(LVAR1.x)*2]]’；

• 为了方便之后复用，元素左上角坐标不肯定为（0，0），移动坐标加上底图坐标，即‘[[0-(LVAR1.x)*2+(LVAR2.x)*2]]’；

• 之后再用时只必要修改图片，就不用重新设置移动的坐标位置。

（3）整个案例到这里基本完成了，但是会发现鼠标移出底图时，放大镜和放大图依然能表现，不吻合逻辑，在事件中添加条件，假如鼠标移动超出底图区域，隐蔽放大镜和放大图，否则表现。

四、总结

案例不难，但是要细致每次选择移动元件时，选择面板照旧图片，还有移动的位置坐标。