编辑指南:本文与你分享如何使用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优缺点分析

优势

这样的交互效果可以节省用户切换图片时候的点击次数，只需要将光标放入图片左右移动就可以进行切换图片。如果两张图片之间有对比或者其他联系更容易让用户将两张图片进行视觉对比操作，不需要频繁地切换。不需要将图片分开放置，节省网页制作的空间， 给用户简洁的交互体验感。

劣势

交互效果可能只适用于对图片的展示，交互功能的延展性较弱，比如对不同图片内的icon设置单击跳转链接的交互效果.该交互效果图片切换的数量有限，交互体验随着图片的增加可能会下降，毕竟用户不想一直通过移动光标的方式来切换到自己想要的图片，这样的情况更适用鼠标点击和banner轮播的混合切换效果.

05摘要

现在我们在网上看到的图片切换效果层出不穷，比如点击切换、幻灯片切换、自动轮播切换等等。每一种切换效果都有其原因，其目的都是为了增加用户的搜索效率和交互体验。设计师需要根据具体情况给出不同的切换交互效果。

这就是今天小鱼带来的光标移动切换效果。赶紧试试。