感謝導語：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 協議
