Axure：电商网站图片放大镜效果
发表时间：2018-07-31 09:35:04
为了加深对动态面板的理解，所以尝试了图片放大镜实现效果，中间也遇到一些小问题。该练习主要用到元件跟随鼠标移动、动态面板。
原型预览：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）整个案例到这里基本完成了，但是会发现鼠标移出底图时，放大镜和放大图依然能显示，不符合逻辑，在事件中添加条件，如果鼠标移动超出底图区域，隐藏放大镜和放大图，否则显示。
四、总结
案例不难，但是要注意每次选择移动元件时，选择面板还是图片，还有移动的位置坐标。
文章来源于网络，如有侵权请联系删除。
最新资讯
更多+
-
百度爱采购如何发布采购信息
登录百度爱采购，可以点击【全网询价】来发布采购信息。如下图展示【全网询价】按钮的4个展现位置，点击其中任意一处即可发布采购信息；
-
百度爱采购如何更好的搜索商品
在搜索结果页面上方，我们提供了多种筛选条件，比如“品牌”、“类型”、“城市”等，使用筛选条件，可以帮您进一步提高搜索的精确度。 如果您暂时没有找到合适的卖家，建议您可以在全网询盘发布采购信息，让卖家主动来联系您！
-
百度爱采购官方简介
爱采购是百度旗下的企业一站式采销平台，旨在帮助用户一站直达全网商品信息，触达优质商家，通过安全便捷的交易能力全网采购。
-
百度爱采购介绍
帮助用户直达商品信息和优质商家，为买家提供搜索商品，搜索厂家，全网询价，指定商家询价，查看报价、在线交易等功能，全方位服务买家。同时为卖家提供了匹配询价单信息，和商家运营后台，帮助卖家快速达成交易。
上海宝亿微信公众号
上海宝亿微信小程序
