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

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

一、效果預(yù)覽

感謝閱讀支持全屏效果——預(yù)覽：

鼠標懸停擴大支持——預(yù)覽：

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

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

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

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

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

導(dǎo)入支持：鼠標感謝原創(chuàng)者分享感謝閱讀，導(dǎo)入本地支持，我在這里是導(dǎo)入了6張支持。

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

4. 制作感謝閱讀之后得大圖

如下圖步驟：

這個時候不用感謝對創(chuàng)作者的支持大圖尺寸，后續(xù)我們會通過交互將大圖尺寸改變得。

5. 添加交互

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

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

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

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

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

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

3. 設(shè)置交互

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

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

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

四、補充知識

窗口函數(shù)使用

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

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

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