编辑导读：本文跟大家分享，如何用Axure实现光标移动切换图片的效果，作者从预览图，到所需原件，再到操作步骤都一一展开了分析，并对过程中需要注意的问题进行了介绍，希望对你有所启发。

01 概述

今天小鱼在腾讯大数据网站上搜查数据的时候找到了一个非常好玩的图片交互效果(如下图)，可能第一眼看到的时候会觉得困难,但是实际上制作的时候是非常简单的，下面小鱼就来教大家如何制作这样的交互效果吧。

02 材料准备

Axure PR 9.0

两张图片(小鱼偷懒用不同颜色的代替，蓝色A，红色B)

03 制作步骤

1、首先我们先准备把两张图片中的其中一张(图片A)给放在底层作为网页加载时首先看到的图片，然后我们需要把同样大小的图片B重叠在图片A上面，因为按照交互逻辑，鼠标移动的时候图片B是一点点跟随光标展开的。

2、但是如何实现让图片B跟随光标一点点展开呢，我们需要把图片B给设置为动态面板，取名屏幕。

动态面板的作用实际上可以理解为给一张照片添加了一个相框，不管你的照片多大相框的面积大小决定了你的照片的可视面积， 所以此时我们需要把这个屏幕的宽度给拉到最小，这里只能设为1，放置在图片A的最左侧。

3、最关键的步骤来了，我们需要设置一个感应区域，这样光标在移入这里面的时候，动态面板可以根据光标的横坐标X值展开。

于是我们添加一个与图片A相同长宽的热区并且置于顶层，对热区设置的交互效果为当鼠标移动时，设置动态面板的尺寸。

注意这里的锚点应该设置为左侧，因为需要它从左侧展开， 我们只需要改变动态面板的宽度为光标的X坐标减去动态面板它的X的坐标就能得出它展开的宽度，效果图如下，一个简单的交互小效果就出来了。

4、另外如果想要添加线段作为翻页分割线，设置一条线段放在图片的最左侧，在感应区设置线段的交互效果。

这里我们需要注意，由于软件对线段横纵坐标的识别会不同于图形，所以不能简单地用光标的横坐标来设置线段移动过程中的横坐标坐标。

比如小鱼这里显示的是线段的坐标实际上是(68,273)，而与线段左侧对齐的图形的坐标确是(196,145。

什么意思呢？就是当你预览的时候，即使视觉上看，所识别的坐标点虽然重合但是坐标却不是相同的。

这里可以观察到，线段的横坐标与图形相差了128个单位，所以设置线段移动时候我们需要设置它的横坐标为[[cursor.x-128]],纵坐标设置与线段的原来纵坐标相同即可即是273. 当然如果你这里用了从网站上下载的图形，就不会出现这样的情况，设置移动坐标时横坐标按照光标的坐标即可。

最终预览链接：https://s2r02p.axshare.com

04 优缺点分析