JD.COM、天猫、淘宝等。都会在电子商务的主画面中起到放大器的作用。用户只需要将鼠标移动到主图放大图片即可看到细节。这种放大器方便用户更多地了解图片中的信息，从而在一定程度上保证了用户对商品的知情权。在本章中，我将教你如何使用axure原型工具制作图像放大器。

00-1010一张300X200的图片，命名为“小图片”；一个150X100的矩形，背景为黄色，边缘为黄色，不透明度设置为30%，初始状态设置为隐藏，命名为“放大镜”，放置在缩略图右下角；初始状态设置为隐藏的300X200动态面板被命名为“放大窗口”，放置在缩略图的右侧，名为“大图片”的600X400图片被放置在状态1面板的状态下。

00-1010在用例中将全局变量OnLoadVariable设置为[大图片宽度/小图片宽度]，即大图片和小图片的宽度比。

00-1010用例中有两个动作：

1.绝对移动放大器，X轴移动到【鼠标X坐标-放大镜宽度的一半】，Y轴移动到【鼠标Y坐标-放大镜高度的一半】，左、右、上、下的边界分别是缩略图的左、右、上、下。

2.绝对移动大图，X轴移动到【(小图左侧-放大镜左侧)*OnLoadVariable】，Y轴移动到【(小图顶部-放大镜顶部)*OnLoadVariable】

第一步：拖拉摆放好相关的控件

这个用例与鼠标移动时“放大镜”的用例相同。直接抄就行了。

00-1010用例中只有两个动作，一个是显示放大镜，一个是显示放大窗口。

好的，点击预览，将鼠标移到图片上查看效果。

在工作过程中，axure原型设计的这些小技巧的例子有很多，所以我会不断分享，希望对大家有所帮助。你对我的关注是我的动力。

效果图：放大器附件的axure原型设计下载：放大器rp文件作者：尺寸。个人博客：http://weidublog.com/

本文最初由@ Dimension发布。每个人都是产品经理。未经允许禁止转载。

飞艇冠军全天人工计划度]，即大图片和小图片的宽度比。

00-1010用例中有两个动作：

1.绝对移动放大器，X轴移动到【鼠标X坐标-放大镜宽度的一半】，Y轴移动到【鼠标Y坐标-放大镜高度的一半】，左、右、上、下的边界分别是缩略图的左、右、上、下。

2.绝对移动大图，X轴移动到【(小图左侧-放大镜左侧)*OnLoadVariable】，Y轴移动到【(小图顶部-放大镜顶部)*OnLoadVariable】

第一步：拖拉摆放好相关的控件

这个用例与鼠标移动时“放大镜”的用例相同。直接抄就行了。

00-1010用例中只有两个动作，一个是显示放大镜，一个是显示放大窗口。

好的，点击预览，将鼠标移到图片上查看效果。

在工作过程中，axure原型设计的这些小技巧的例子有很多，所以我会不断分享，希望对大家有所帮助。你对我的关注是我的动力。

效果图：放大器附件的axure原型设计下载：放大器rp文件作者：尺寸。个人博客：http://weidublog.com/

本文最初由@ Dimension发布。每个人都是产品经理。未经允许禁止转载。