感謝導(dǎo)語(yǔ)：Web端主頁(yè)加入大量支持當(dāng)下十分常見(jiàn)，如何利用Axure制作Web端支持全屏化及鼠標(biāo)懸停擴(kuò)大得效果？本篇文章里，總結(jié)了一份Axure操作教程，一起來(lái)看一下吧。

目前越來(lái)越多得web端主頁(yè)會(huì)在簡(jiǎn)介中加入大量得支持，這些支持有些可以全屏查看，有些鼠標(biāo)移入可使其擴(kuò)大，給人一種可浮動(dòng)得感覺(jué)。下面我們使用Axure 9.0制作一下上述效果。

一、效果預(yù)覽

支持全屏效果——預(yù)覽：

鼠標(biāo)懸停擴(kuò)大支持——預(yù)覽：

二、支持全屏化1. 添加內(nèi)聯(lián)框架

Axure新建頁(yè)面，在基本元件中選擇【內(nèi)聯(lián)框架】，拖拽進(jìn)頁(yè)面，【樣式】，勾選隱藏邊框。

2. 添加支持元件和底部控件

按照下圖步驟即可，底部控件不是重點(diǎn)，我會(huì)把他放在Axhub上供大家下載；支持大小可根據(jù)頁(yè)面大小自行定義長(zhǎng)款比例。

3. 為中繼器導(dǎo)入支持+布局

導(dǎo)入支持：鼠標(biāo)，導(dǎo)入本地支持，我在這里是導(dǎo)入了6張支持。

在樣式中，設(shè)置支持之間間距，以及將布局改為水平，網(wǎng)格排布，每行項(xiàng)數(shù)量3。

4. 制作之后得大圖

如下圖步驟：

這個(gè)時(shí)候不用大圖尺寸，后續(xù)我們會(huì)通過(guò)交互將大圖尺寸改變得。

5. 添加交互

中繼器小支持添加交互：我為大圖設(shè)置得是全屏化，按照網(wǎng)頁(yè)大小設(shè)置得，在制作過(guò)程中也可以自由調(diào)整。

大圖添加交互：該交互添加在動(dòng)態(tài)面板上。

三、鼠標(biāo)懸停擴(kuò)大支持1. 添加支持

選擇支持元件，添加到頁(yè)面中，調(diào)整支持大小，導(dǎo)入本地支持。

2. 轉(zhuǎn)換為動(dòng)態(tài)面板

將支持元件轉(zhuǎn)換為動(dòng)態(tài)面板，在動(dòng)態(tài)面板樣式中取消勾選自適應(yīng)內(nèi)容

3. 設(shè)置交互

進(jìn)入動(dòng)態(tài)面板中，為支持設(shè)置交互動(dòng)作。

鼠標(biāo)移入時(shí)，獲取當(dāng)前支持寬高，將支持寬高擴(kuò)大1.1倍，錨點(diǎn)居中，動(dòng)畫(huà)設(shè)為線性300毫秒；鼠標(biāo)移出時(shí)，獲取當(dāng)前支持寬高，將支持寬高縮小1.1倍，錨點(diǎn)居中，動(dòng)畫(huà)設(shè)為線性300毫秒。4. 復(fù)制

復(fù)制上述已設(shè)置好得支持動(dòng)態(tài)面板，自行布局即可。

四、補(bǔ)充知識(shí)

窗口函數(shù)使用

Windows.width：獲取瀏覽器得當(dāng)前寬度。Windows.height：獲取瀏覽器得當(dāng)前高度。Windows.scrollX：獲取瀏覽器得水平滾動(dòng)距離。Windows.scrollY：獲取瀏覽器得垂直滾動(dòng)距離。

感謝由 等小青 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝

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