起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure9.0基礎(chǔ)教程：Web端圖片點擊全屏化及鼠標(biāo)懸停擴大
編輯導(dǎo)語：Web端主頁加入大量圖片當(dāng)下十分常見，如何利用Axure制作Web端圖片點擊全屏化及鼠標(biāo)懸停擴大的效果？本篇文章里，作者總結(jié)了一份Axure操作教程，一起來看一下吧。
目前越來越多的web端主頁會在簡介中加入大量的圖片，這些圖片有些可以全屏查看，有些鼠標(biāo)移入可使其擴大，給人一種可浮動的感覺。下面我們使用Axure 9.0制作一下上述效果。
一、效果預(yù)覽
點擊圖片全屏效果——預(yù)覽：
鼠標(biāo)懸停擴大圖片——預(yù)覽：
二、點擊圖片全屏化
1. 添加內(nèi)聯(lián)框架
Axure新建頁面，在基本元件中選擇【內(nèi)聯(lián)框架】，拖拽進頁面，點擊【樣式】，勾選隱藏邊框。
2. 添加圖片元件和底部控件
按照下圖步驟即可，底部控件不是重點，我會把他放在Axhub上供大家下載；圖片大小可根據(jù)頁面大小自行定義長款比例。
3. 為中繼器導(dǎo)入圖片+布局
導(dǎo)入圖片：鼠標(biāo)郵件點擊，導(dǎo)入本地圖片，我在這里是導(dǎo)入了6張圖片。
在樣式中，設(shè)置圖片之間間距，以及將布局改為水平，網(wǎng)格排布，每行項數(shù)量3。
4. 制作點擊之后的大圖
如下圖步驟：
這個時候不用關(guān)注大圖尺寸，后續(xù)我們會通過交互將大圖尺寸改變的。
5. 添加交互
中繼器小圖片添加交互：我為大圖設(shè)置的是全屏化，按照網(wǎng)頁大小設(shè)置的，在制作過程中也可以自由調(diào)整。
大圖添加交互：該交互添加在動態(tài)面板上。
三、鼠標(biāo)懸停擴大圖片
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è)置交互動作。
- 鼠標(biāo)移入時，獲取當(dāng)前圖片寬高，將圖片寬高擴大1.1倍，錨點居中，動畫設(shè)為線性300毫秒；
- 鼠標(biāo)移出時，獲取當(dāng)前圖片寬高，將圖片寬高縮小1.1倍，錨點居中，動畫設(shè)為線性300毫秒。
4.?復(fù)制
復(fù)制上述已設(shè)置好的圖片動態(tài)面板，自行布局即可。
四、補充知識
窗口函數(shù)使用
- Windows.width：獲取瀏覽器的當(dāng)前寬度。
- Windows.height：獲取瀏覽器的當(dāng)前高度。
- Windows.scrollX：獲取瀏覽器的水平滾動距離。
- Windows.scrollY：獲取瀏覽器的垂直滾動距離。
本文由 @小青 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自?Unsplash，基于 CC0 協(xié)議
你好，能解釋一下為什么要在圖片的動態(tài)面板上添加顯示隱藏交互，而不是直接在圖片上呢？
我看了一下，是在中繼器里面的圖片上面添加了顯示隱藏交互，沒在動態(tài)面板上面加啊
不好意思，文章中忘記放置Axure源文件下載地址，下載地址如下：
鏈接：https://pan.baidu.com/s/1UmuyR6ISTjUIvQjFbMEleA
提取碼：3fss
文件有點大，是因為制作時使用的圖片文件過大