Axure怎么制作頂部吸附交互效果的網(wǎng)頁原型?
我要評論我們在日常瀏覽網(wǎng)頁的時(shí)候，會(huì)發(fā)現(xiàn)上面的導(dǎo)航欄一直保持不動(dòng)，而下面的內(nèi)容會(huì)隨著滾動(dòng)條的拖動(dòng)而滑動(dòng)，這個(gè)效果就是所謂的頂部吸附的效果，該怎么使用axure制作這個(gè)交互效果呢？下面我們就來看看詳細(xì)的教程。
原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)
- 類型：輔助設(shè)計(jì)
- 大?。?/span>90.5MB
- 語言：簡體中文
- 時(shí)間：2018-05-24
1、首先新建一個(gè)空白頁面，在工作區(qū)域拖入本次要使用的元件元素，幾個(gè)矩形和幾個(gè)動(dòng)態(tài)面板就可以了，如下圖所示。
2、然后我們對元件元素的樣式進(jìn)行調(diào)整，并對里面的描述文字進(jìn)行編寫，如下圖所示。
3、這一步需要對兩個(gè)動(dòng)態(tài)面板的名稱進(jìn)行設(shè)置，一個(gè)是上面的信息展示，一個(gè)是下面的導(dǎo)航信息，如下圖所示。命名沒有要求，想叫什么都可以。
4、打開動(dòng)態(tài)面板，將兩個(gè)矩形復(fù)制到動(dòng)態(tài)面板中，如下圖所示。
5、下面一步需要將兩個(gè)動(dòng)態(tài)面板的固定到瀏覽器這一項(xiàng)進(jìn)行設(shè)置，水平要固定到居中位置，垂直要在上，如下圖所示。
6、元件相關(guān)樣式及屬性設(shè)置完成后，開始對交互事件進(jìn)行設(shè)置，這里需要給頁面加入交互事件，首先是第一個(gè)判斷條件，使用函數(shù)判斷窗口距離，如下圖所示。
7、然后設(shè)置第一個(gè)動(dòng)態(tài)面板移動(dòng)的絕對位置，如下圖所示。
8、然后設(shè)置第二動(dòng)態(tài)面板隱藏，如下圖所示。
9、同上的方式，做第二個(gè)判斷條件，并對兩個(gè)動(dòng)態(tài)面板的交互進(jìn)行設(shè)置，如下圖所示。
10、最后一步，因?yàn)槭谴翱跐L動(dòng)的效果，所以需要再拖入一個(gè)矩形，并將矩形拉長一些，這樣瀏覽的時(shí)候窗口就有滾動(dòng)條了，如下圖所示。
11、好了，工作準(zhǔn)備完成，f5預(yù)覽一下效果，試著滾動(dòng)鼠標(biāo)，這些信息欄會(huì)消失，導(dǎo)航欄會(huì)吸附到最上面。
以上就是Axure頂部吸附交互效果的制作方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
axure怎么設(shè)計(jì)菜單橫向隱藏與顯示的效果?
Axure RP8怎么設(shè)計(jì)倒計(jì)時(shí)獲取短信驗(yàn)證碼效果?
相關(guān)文章
Axure怎么制作控制條控制地圖放大效果？Axure中想要制作一個(gè)地圖放大效果，并且可以使用控制條控制，下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-12-11
Axure怎么制作模擬地圖放大效果？Axure中制作網(wǎng)頁原型的時(shí)候，想要制作模擬百度底乳放大縮小的效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-12-07
Axure怎么制作圖片局部放大的效果？Axure中想要制作圖片局部放大的效果，該怎么制作呢？下面我們就來看看Axure局部放大效果的制作方法，需要的朋友可以參考下2018-12-06
Axure怎么制作翻轉(zhuǎn)效果的手機(jī)引導(dǎo)頁?
Axure怎么制作翻轉(zhuǎn)效果的手機(jī)引導(dǎo)頁？Axure中想要制作一個(gè)引導(dǎo)頁，該怎么制作翻轉(zhuǎn)效果的引導(dǎo)頁呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-12-03
Axure怎么制作滑動(dòng)引導(dǎo)頁效果的原型?
Axure怎么制作滑動(dòng)引導(dǎo)頁效果的原型？Axure中設(shè)計(jì)網(wǎng)頁原型很簡單，想要制作一個(gè)華東的引導(dǎo)頁，該怎么制作這個(gè)動(dòng)搖交互效果呢？需要的朋友可以參考下2018-12-03
Axure怎么設(shè)計(jì)調(diào)整屏幕亮度效果的效果?
Axure怎么設(shè)計(jì)調(diào)整屏幕亮度效果的效果？Axure設(shè)計(jì)網(wǎng)頁原型很簡單，想要制作一個(gè)調(diào)整屏幕亮度的交互效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-11-30
Axure怎么制作手機(jī)充話費(fèi)的界面效果？經(jīng)常使用網(wǎng)絡(luò)充值話費(fèi)，想要制作話費(fèi)充值頁面，該怎么制作呢？下面我們就來看看axure制作話費(fèi)充值界面的教程，需要的朋友可以參考下2018-11-29
Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果?
Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果？Axure中想要制作一個(gè)數(shù)字遞加遞減的效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-11-28
Axure怎么制作文字滾動(dòng)的動(dòng)態(tài)效果?
Axure怎么制作文字滾動(dòng)的動(dòng)態(tài)效果？Axure中想要制作一個(gè)滾動(dòng)字幕，該怎么給文字添加滾動(dòng)效果呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-11-28
Axure怎么制作云層滾動(dòng)的動(dòng)態(tài)效果?
Axure怎么制作云層滾動(dòng)的動(dòng)態(tài)效果？Axure中想要制作一個(gè)云層效果，并添加翻滾的動(dòng)態(tài)效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-11-27
