Axure：PC端常见图片展位悬停效果（三）

　　在接下来的篇幅中，我们将尝试着实现常见的“悬停时浮层隐现（切换）”效果。
　　这一篇，我们以woshipm官网的轮播图悬停效果为示例，来实现以下效果：
　　鼠标移入移出时显示隐藏“上一张”“下一张”入口
　　悬停时浮层显现，并有线行动画
　　（直接去看首页轮播，截的gif图有点卡卡的）
　　该效果常见于各大网站的轮播图，默认不显示切换入口，鼠标悬停时才显示。
　　现在，我们依次尝试使用axure实现该效果。
　　快速预览成果：https：4o2c1f。axshare。com
　　woshipm首页的轮播图悬停时浮层显现，并有线行动画
　　1。1概况
　　所需要元件：
　　图片元件1
　　动态面板2
　　icons2向左、向右。放置于动态面板中
　　涉及交互事件（用例）：
　　鼠标移入时
　　鼠标移出时
　　涉及动作：
　　显示隐藏
　　涉及动画：
　　向左滑动
　　向右滑动
　　注意操作：
　　元件组合若不组合，会有一个bug
　　1。2素材制作
　　拖入一个图片示例的宽高：574335；
　　拖入一个动态面板，命名为“上一张”示例设置：宽高5060、背景色000000（纯黑）、不透明度30；
　　双击进入动态面板“上一张”，拖入向左示例设置：填充色ffffff（纯白）、宽高1730、坐标（17，15）（视觉上居中）；
　　按2、3的步骤再制作动态面板“下一张”（也可按住ctrl拖动“上一张”，实现复制，再进行调整）注意换成向右的icons。
　　适当的排版对齐之后，效果如下：
　　1。3交互动作
　　设置“上一张”、“下一张”为隐藏默认不显示；
　　点击图片，添加用例：鼠标移入时、添加鼠标移出时；
　　进入用例编辑，添加动作：显示隐藏动态面板“上一张”与“下一张”。
　　相应设置如下图：
　　注意：
　　鼠标移入移出的用例要有区别（正好相反）
　　不要忘了加动画，同时，两个动态面板的动作是不一样的，一定要仔细，不要搞混
　　OK，以上操作完成之后，效果基本实现，如下图：
　　但是，发现有一个问题：
　　当鼠标的位置移入到“上一张”或“下一张”时，“上一张”、“下一张”会不断的显示隐藏。
　　1。4解决问题
　　原因分析：
　　层级关系上，“上一张”、“下一张”位于“图片”的上面（才能看到），所以当鼠标移入到“上一张”或“下一张”时，实际上已经不在图片的区域了。
　　即触发了图片的用例“鼠标移出时”隐藏“上一张”、“下一张”，而“上一张”、“下一张”隐藏之后，鼠标又回到图片的区域，触发图片的用例“鼠标移入时”显示“上一张”、“下一张”。
　　从而形一个无限的循环：显示隐藏显示隐藏。
　　解决办法：
　　办法1
　　添加一个最顶透明的最顶层（例如：透明的矩形、热区、透明背景的动态面板），将2个用例放置于该最顶层。
　　可以解决问题，但是会引发新的问题：鼠标将不能点击到“上一张”、“下一张”了，因为被最顶层盖住了。
　　办法2
　　将操作区域内的元件做为一个整体（例如：组合、动态面板）将2个用例放置于该最顶层。
　　可以解决问题，同时不会产生办法1引发的新问题。
　　我们来试试办法2：
　　拖拽鼠标，选中操作区域内的元件，右角，同时将组合命名为“展位”；
　　将原图片上的2个用例【鼠标移入时】【鼠标移出时】复制到“展位”上注意最好同时最好将原图片上的用户删除掉。
　　再来看下效果：
　　搞定，再也不会出现死循环了。
　　注意：使用组合可以达到同样的效果，实际练习应灵活选择。
　　思考一下除了以上两个解决办法，还有哪些其他办法也可以解决该问题？
　　最后，以上效果预览地址：https：4o2c1f。axshare。com
　　对比一下，看看都做出来没？！
　　1。5其它“悬停时浮层隐现（切换）”后续篇幅探讨
　　图1：woshipm首页专题图悬停时浮层上移，同时文字飞入
　　图2：某视频网站1视频列表悬停时浮层上移
　　图3：某视频网站2的视频列表悬停时浮层显现
　　以上3个效果是将在后续的篇幅中逐一实现。
　　若大家还有其他的典型的“悬停时浮层隐现（切换）”效果，也请帮我指出，将一并加入到后续的分享计划中，谢谢！
　　相关阅读
　　Axure：PC端常见图片展位悬停效果（二）
　　Axure：PC端常见图片展位悬停效果（一）