在接下來的篇幅中，我們將嘗試著實現常見的“懸停時浮層隱現（切換）”效果。

這一篇，我們以woshipm官網的輪播圖懸停效果為示例，來實現以下效果：

鼠標移入/移出時顯示/隱藏 “上一張”“下一張”入口

懸停時浮層顯現，并有線行動畫

（直接去看首頁輪播，截的gif圖有點卡卡的）

該效果常見于各大網站的輪播圖，默認不顯示切換入口，鼠標懸停時才顯示。

現在，我們依次嘗試使用axure實現該效果。

快速預覽成果：https://4o2c1f.axshare.com

woshipm首頁的輪播圖 – 懸停時浮層顯現，并有線行動畫

1.1 概況

所需要元件：

• 圖片元件 * 1
• 動態面板 * 2
• icons * 2? —— 向左、向右。放置于動態面板中

涉及交互事件（用例）：

• 鼠標移入時
• 鼠標移出時

涉及動作：

• 顯示/隱藏

涉及動畫：

• 向左滑動
• 向右滑動

注意操作：

• 元件組合 —— 若不組合，會有一個bug

1.2 素材制作

1. 拖入一個圖片 —— 示例的寬高：574*335；
2. 拖入一個動態面板，命名為“上一張” ——?示例設置：寬高 50*60、背景色 000000（純黑）、不透明度30；
3. 雙擊進入動態面板“上一張”，拖入向左icons ——?示例設置：填充色 ffffff（純白）、寬高 17*30、坐標（17,15）（視覺上居中）；
4. 按2、3的步驟再制作動態面板“下一張”（也可按住ctrl拖動“上一張”，實現復制，再進行調整） —— 注意換成向右的icons。

適當的排版對齊之后，效果如下：

1.3 交互動作

1. 設置“上一張”、“下一張”為隱藏 —— 默認不顯示；
2. 點擊圖片，添加用例：鼠標移入時、添加鼠標移出時；
3. 進入用例編輯，添加動作：顯示/隱藏 動態面板“上一張”與“下一張”。

相應設置如下圖：

注意：

1. 鼠標移入移出的用例要有區別（正好相反）
2. 不要忘了加動畫，同時，兩個動態面板的動作是不一樣的，一定要仔細，不要搞混

OK，以上操作完成之后，效果基本實現，如下圖：

但是，發現有一個問題：

當鼠標的位置移入到“上一張”或“下一張”時，“上一張”、“下一張”會不斷的顯示/隱藏。

1.4 解決問題

原因分析：

層級關系上，“上一張”、“下一張”位于“圖片”的上面（才能看到），所以當鼠標移入到“上一張”或“下一張”時，實際上已經不在圖片的區域了。

即觸發了圖片的用例“鼠標移出時”—— 隱藏“上一張”、“下一張”，而“上一張”、“下一張”隱藏之后，鼠標又回到圖片的區域，觸發圖片的用例“鼠標移入時”—— 顯示“上一張”、“下一張”。

從而形一個無限的循環：顯示隱藏顯示隱藏。

解決辦法：

辦法1

添加一個最頂透明的最頂層（例如：透明的矩形、熱區、透明背景的動態面板），將2個用例放置于該最頂層。

可以解決問題，但是會引發新的問題：鼠標將不能點擊到“上一張”、“下一張”了，因為被最頂層蓋住了。

辦法2

將操作區域內的元件做為一個整體（例如：組合、動態面板）將2個用例放置于該最頂層。

可以解決問題，同時不會產生辦法1引發的新問題。

我們來試試辦法2：

1. 拖拽鼠標，選中操作區域內的元件，右角，同時將組合命名為“展位”；
2. 將原圖片上的2個用例【鼠標移入時】【鼠標移出時】復制到“展位”上 —— 注意最好同時最好將原圖片上的用戶刪除掉。

再來看下效果：

搞定，再也不會出現死循環了。

注意：使用組合可以達到同樣的效果，實際練習應靈活選擇。

思考一下——除了以上兩個解決辦法，還有哪些其他辦法也可以解決該問題？

最后，以上效果預覽地址：https://4o2c1f.axshare.com

對比一下，看看都做出來沒？！

1.5 其它“懸停時浮層隱現（切換）”—— 后續篇幅探討

圖1：woshipm首頁專題圖 – 懸停時浮層上移，同時文字飛入

圖2：某視頻網站1視頻列表 – 懸停時浮層上移

圖3：某視頻網站2的視頻列表 – 懸停時浮層顯現

以上3個效果是將在后續的篇幅中逐一實現。

若大家還有其他的典型的“懸停時浮層隱現（切換）”效果，也請幫我指出，將一并加入到后續的分享計劃中，謝謝！

相關閱讀

Axure：PC端常見圖片展位懸停效果（二）

Axure：PC端常見圖片展位懸停效果（一）

本文由 @牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議