jq鼠标移入移出_Axure交互动效「03：鼠标悬停结合鼠标移入、鼠标单击」

今天开我们讲解Axure交互样式(鼠标悬停)、属性用例(鼠标移入时、鼠标移出时)复杂的小动效，在工作中我们经常会用Axure，主要是让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档，让客户能够更好的了解到自己的产品在上线以后的一个基本的效果是个什么样子。当然在制作的过程中也会出现以下对软件不熟悉的情况导致工具、元件不会使用等等。今天主要讲的是Axure交互样式里面的鼠标悬停结合着属性用例的鼠标移入时、移出时，我们平时在网页当中经常会看到这样的效果，

如下图所示我们首先看到的是两块内容，当鼠标移入左图时，左图变模糊整体向上移动并加投影效果，鼠标移出时回到原位变清晰；右图一样的效果。

(GIF图自己制作-图片来源网络)

这样的效果在Axure中如何制作呢？打开Axure跟着我一起操作。

第一步：我们需要在Photoshop中准备一张图片，尺寸自己定如下图：

准备好图片以后。

第二步：打开Axure软件；Ctrl+N新建一个文件，然后把图片拖拽进Axure里面，在图片上方空白区域加入文本标签，如下图：

加入文字以后。

第三步：选中图片在右上角的位置命名为：图片底板，如下图：

同样的方式，选中所有文字(如果你是在一个文本标签输入的直接选中这个文本标签就可以了；如果你是在三个文本标签输入的文字，按住Shift键分别点击每一个文本标签，达到全选的状态，右击编组或者Ctrl+G)，选中后命名为：文案。

第四步：选中图片右击选择交互样式如下图：

点击交互样式，打开如下图：

选择鼠标悬停，在下面找到不透明度勾选改成50；找到外部阴影勾选点击下拉箭头，X轴：0；Y轴：6；模糊：5；颜色：黑色，颜色的不透明度30%。设置完以后，点击确定。继续选中这个图片底板。

第五步：继续选中图片底板，在软件界面右边检视里面找到属性，如下图：

在属性里面出现交互用例：鼠标单击时、鼠标移入时、鼠标移出时，我们现在要设置鼠标移入和鼠标移出，选中鼠标移入时双击，打开用例编辑窗口，如下图：

鼠标移入时的用例编辑，可编辑的范围有三块是联系在一起的，最左边是添加动作，中间是组织动作，最右边是配置动作；三者之间的关系是：先有动作，再调整动作顺序，最后设置动作要怎么动，我们现在开始设置，先找到最左边的添加动作里面的移动，点击移动，中间的组织动作里面会出现移动元件字样，然后再配置动作里面勾选图片底板，在下面会出现移动位置以及动画，移动：相对位置；X轴：0；Y轴：-20。动画：线性，时间：500。如下图：

设置好图片底板后，勾选文案下面数值同样的设置方式如下图：

点击确定。

第六步：继续选中图片底板，在软件界面右边检视里面找到属性，选中鼠标移出时双击，打开用例编辑窗口。先找到最左边的添加动作里面的移动，点击移动，中间的组织动作里面会出现移动元件字样，然后再配置动作里面勾选图片底板，在下面会出现移动位置以及动画，移动：相对位置；X轴：0；Y轴：20。动画：线性，时间：500。设置好图片底板后，勾选文案下面数值同样的设置方式，原来我们在鼠标移入时设置的移动Y轴为-20，现在我们在鼠标移出时设置的移动Y轴为20，一负一正。如下图：

点击确定后我们就设置完了，现在我们用鼠标画框选中我们的图片底板和文案，按住Alt键鼠标向右边拖拽复制，最后的样子为：

在这个情况下，点击Axure软件界面右上角的预览，在浏览器中就可以看到效果了，首选谷歌浏览器哦！！！

(完)