感謝導語：Web端主頁加入大量支持當下十分常見，如何利用Axure制作Web端支持全屏化及鼠標懸停擴大得效果？本篇文章里，總結了一份Axure操作教程，一起來看一下吧。

目前越來越多得web端主頁會在簡介中加入大量得支持，這些支持有些可以全屏查看，有些鼠標移入可使其擴大，給人一種可浮動得感覺。下面我們使用Axure 9.0制作一下上述效果。

一、效果預覽

支持全屏效果——預覽：

鼠標懸停擴大支持——預覽：

二、支持全屏化1. 添加內聯框架

Axure新建頁面，在基本元件中選擇【內聯框架】，拖拽進頁面，【樣式】，勾選隱藏邊框。

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

按照下圖步驟即可，底部控件不是重點，我會把他放在Axhub上供大家下載；支持大小可根據頁面大小自行定義長款比例。

3. 為中繼器導入支持+布局

導入支持：鼠標，導入本地支持，我在這里是導入了6張支持。

在樣式中，設置支持之間間距，以及將布局改為水平，網格排布，每行項數量3。

4. 制作之后得大圖

如下圖步驟：

這個時候不用大圖尺寸，后續我們會通過交互將大圖尺寸改變得。

5. 添加交互

中繼器小支持添加交互：我為大圖設置得是全屏化，按照網頁大小設置得，在制作過程中也可以自由調整。

大圖添加交互：該交互添加在動態面板上。

三、鼠標懸停擴大支持1. 添加支持

選擇支持元件，添加到頁面中，調整支持大小，導入本地支持。

2. 轉換為動態面板

將支持元件轉換為動態面板，在動態面板樣式中取消勾選自適應內容

3. 設置交互

進入動態面板中，為支持設置交互動作。

鼠標移入時，獲取當前支持寬高，將支持寬高擴大1.1倍，錨點居中，動畫設為線性300毫秒；鼠標移出時，獲取當前支持寬高，將支持寬高縮小1.1倍，錨點居中，動畫設為線性300毫秒。4. 復制

復制上述已設置好得支持動態面板，自行布局即可。

四、補充知識

窗口函數使用

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

感謝由 等小青 來自互聯網發布于人人都是產品經理，未經許可，禁止感謝

題圖來自 Unsplash，基于 CC0 協議