起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure：PC端常見圖片展位懸停效果（三）
在接下來的篇幅中，我們將嘗試著實現常見的“懸停時浮層隱現（切換）”效果。
這一篇，我們以woshipm官網的輪播圖懸停效果為示例，來實現以下效果：
鼠標移入/移出時顯示/隱藏 “上一張”“下一張”入口
懸停時浮層顯現，并有線行動畫
（直接去看首頁輪播，截的gif圖有點卡卡的）
該效果常見于各大網站的輪播圖，默認不顯示切換入口，鼠標懸停時才顯示。
現在，我們依次嘗試使用axure實現該效果。
快速預覽成果：https://4o2c1f.axshare.com
woshipm首頁的輪播圖 – 懸停時浮層顯現，并有線行動畫
1.1 概況
所需要元件：
- 圖片元件 * 1
- 動態面板 * 2
- icons * 2? —— 向左、向右。放置于動態面板中
涉及交互事件（用例）：
- 鼠標移入時
- 鼠標移出時
涉及動作：
- 顯示/隱藏
涉及動畫：
- 向左滑動
- 向右滑動
注意操作：
- 元件組合 —— 若不組合，會有一個bug
1.2 素材制作
- 拖入一個圖片 —— 示例的寬高：574*335；
- 拖入一個動態面板，命名為“上一張” ——?示例設置：寬高 50*60、背景色 000000（純黑）、不透明度30；
- 雙擊進入動態面板“上一張”，拖入向左icons ——?示例設置：填充色 ffffff（純白）、寬高 17*30、坐標（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個效果是將在后續的篇幅中逐一實現。
若大家還有其他的典型的“懸停時浮層隱現（切換）”效果，也請幫我指出，將一并加入到后續的分享計劃中，謝謝！
相關閱讀
本文由 @牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
- 目前還沒評論，等你發揮！
