感謝導(dǎo)語：Web端主頁加入大量支持當(dāng)下十分常見，如何利用Axure制作Web端支持感謝閱讀全屏化及鼠標(biāo)懸停擴(kuò)大得效果？本篇文章里，感謝分享總結(jié)了一份Axure操作教程，一起來看一下吧。
目前越來越多得web端主頁會(huì)在簡(jiǎn)介中加入大量得支持，這些支持有些可以全屏查看，有些鼠標(biāo)移入可使其擴(kuò)大，給人一種可浮動(dòng)得感覺。下面我們使用Axure 9.0制作一下上述效果。
一、效果預(yù)覽感謝閱讀支持全屏效果——預(yù)覽：
鼠標(biāo)懸停擴(kuò)大支持——預(yù)覽：
二、感謝閱讀支持全屏化1. 添加內(nèi)聯(lián)框架Axure新建頁面，在基本元件中選擇【內(nèi)聯(lián)框架】，拖拽進(jìn)頁面，感謝閱讀【樣式】，勾選隱藏邊框。
2. 添加支持元件和底部控件按照下圖步驟即可，底部控件不是重點(diǎn)，我會(huì)把他放在Axhub上供大家下載；支持大小可根據(jù)頁面大小自行定義長(zhǎng)款比例。
3. 為中繼器導(dǎo)入支持+布局導(dǎo)入支持：鼠標(biāo)感謝原創(chuàng)者分享感謝閱讀，導(dǎo)入本地支持，我在這里是導(dǎo)入了6張支持。
在樣式中，設(shè)置支持之間間距，以及將布局改為水平，網(wǎng)格排布，每行項(xiàng)數(shù)量3。
4. 制作感謝閱讀之后得大圖如下圖步驟：
這個(gè)時(shí)候不用感謝對(duì)創(chuàng)作者的支持大圖尺寸，后續(xù)我們會(huì)通過交互將大圖尺寸改變得。
5. 添加交互中繼器小支持添加交互：我為大圖設(shè)置得是全屏化，按照網(wǎng)頁大小設(shè)置得，在制作過程中也可以自由調(diào)整。
大圖添加交互：該交互添加在動(dòng)態(tài)面板上。
三、鼠標(biāo)懸停擴(kuò)大支持1. 添加支持選擇支持元件，添加到頁面中，調(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)畫設(shè)為線性300毫秒；鼠標(biāo)移出時(shí)，獲取當(dāng)前支持寬高，將支持寬高縮小1.1倍，錨點(diǎn)居中，動(dòng)畫設(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)距離。感謝由 等小青 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝
題圖來自 Unsplash，基于 CC0 協(xié)議
