国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

懸停時(shí)浮層顯現(xiàn)，并有線行動(dòng)畫(huà)

（直接去看首頁(yè)輪播，截的gif圖有點(diǎn)卡卡的）

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

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

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

woshipm首頁(yè)的輪播圖 – 懸停時(shí)浮層顯現(xiàn)，并有線行動(dòng)畫(huà)

1.1 概況

所需要元件：

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

涉及交互事件（用例）：

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

涉及動(dòng)作：

• 顯示/隱藏

涉及動(dòng)畫(huà)：

• 向左滑動(dòng)
• 向右滑動(dòng)

注意操作：

• 元件組合 —— 若不組合，會(huì)有一個(gè)bug

1.2 素材制作

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

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

1.3 交互動(dòng)作

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

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

注意：

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

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

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

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

1.4 解決問(wèn)題

原因分析：

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

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

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

解決辦法：

辦法1

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

可以解決問(wèn)題，但是會(huì)引發(fā)新的問(wèn)題：鼠標(biāo)將不能點(diǎn)擊到“上一張”、“下一張”了，因?yàn)楸蛔铐攲由w住了。

辦法2

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

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

我們來(lái)試試辦法2：

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

再來(lái)看下效果：

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

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

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

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

對(duì)比一下，看看都做出來(lái)沒(méi)？！

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

圖1：woshipm首頁(yè)專題圖 – 懸停時(shí)浮層上移，同時(shí)文字飛入

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

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

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

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

相關(guān)閱讀

Axure：PC端常見(jiàn)圖片展位懸停效果（二）

Axure：PC端常見(jiàn)圖片展位懸停效果（一）

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

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