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

這一篇，我們以woshipm官網(wǎng)的輪播圖懸停效果為示例，來實現(xiàn)以下效果：

鼠標(biāo)移入/移出時顯示/隱藏 “上一張”“下一張”入口

懸停時浮層顯現(xiàn)，并有線行動畫

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

該效果常見于各大網(wǎng)站的輪播圖，默認(rèn)不顯示切換入口，鼠標(biāo)懸停時才顯示。

現(xiàn)在，我們依次嘗試使用axure實現(xiàn)該效果。

快速預(yù)覽成果：https://4o2c1f.axshare.com

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

1.1 概況

所需要元件：

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

涉及交互事件（用例）：

• 鼠標(biāo)移入時
• 鼠標(biāo)移出時

涉及動作：

• 顯示/隱藏

涉及動畫：

• 向左滑動
• 向右滑動

注意操作：

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

1.2 素材制作

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

適當(dāng)?shù)呐虐鎸R之后，效果如下：

1.3 交互動作

1. 設(shè)置“上一張”、“下一張”為隱藏 —— 默認(rèn)不顯示；
2. 點擊圖片，添加用例：鼠標(biāo)移入時、添加鼠標(biāo)移出時；
3. 進(jìn)入用例編輯，添加動作：顯示/隱藏 動態(tài)面板“上一張”與“下一張”。

相應(yīng)設(shè)置如下圖：

注意：

1. 鼠標(biāo)移入移出的用例要有區(qū)別（正好相反）
2. 不要忘了加動畫，同時，兩個動態(tài)面板的動作是不一樣的，一定要仔細(xì)，不要搞混

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

但是，發(fā)現(xiàn)有一個問題：

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

1.4 解決問題

原因分析：

層級關(guān)系上，“上一張”、“下一張”位于“圖片”的上面（才能看到），所以當(dāng)鼠標(biāo)移入到“上一張”或“下一張”時，實際上已經(jīng)不在圖片的區(qū)域了。

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

從而形一個無限的循環(huán)：顯示隱藏顯示隱藏。

解決辦法：

辦法1

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

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

辦法2

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

可以解決問題，同時不會產(chǎn)生辦法1引發(fā)的新問題。

我們來試試辦法2：

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

再來看下效果：

搞定，再也不會出現(xiàn)死循環(huán)了。

注意：使用組合可以達(dá)到同樣的效果，實際練習(xí)應(yīng)靈活選擇。

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

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

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

1.5 其它“懸停時浮層隱現(xiàn)（切換）”—— 后續(xù)篇幅探討

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

圖2：某視頻網(wǎng)站1視頻列表 – 懸停時浮層上移

圖3：某視頻網(wǎng)站2的視頻列表 – 懸停時浮層顯現(xiàn)

以上3個效果是將在后續(xù)的篇幅中逐一實現(xiàn)。

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

相關(guān)閱讀

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

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

本文由 @牧逸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議