我們在日常瀏覽網(wǎng)頁的時(shí)候,會發(fā)現(xiàn)上面的導(dǎo)航欄一直保持不動,而下面的內(nèi)容會隨著滾動條的拖動而滑動,這個(gè)效果就是所謂的頂部吸附的效果,該怎么使用axure制作這個(gè)交互效果呢?下面我們就來看看詳細(xì)的教程。
1、首先新建一個(gè)空白頁面,在工作區(qū)域拖入本次要使用的元件元素,幾個(gè)矩形和幾個(gè)動態(tài)面板就可以了,如下圖所示。
2、然后我們對元件元素的樣式進(jìn)行調(diào)整,并對里面的描述文字進(jìn)行編寫,如下圖所示。
3、這一步需要對兩個(gè)動態(tài)面板的名稱進(jìn)行設(shè)置,一個(gè)是上面的信息展示,一個(gè)是下面的導(dǎo)航信息,如下圖所示。命名沒有要求,想叫什么都可以。
4、打開動態(tài)面板,將兩個(gè)矩形復(fù)制到動態(tài)面板中,如下圖所示。
5、下面一步需要將兩個(gè)動態(tài)面板的固定到瀏覽器這一項(xiàng)進(jìn)行設(shè)置,水平要固定到居中位置,垂直要在上,如下圖所示。
6、元件相關(guān)樣式及屬性設(shè)置完成后,開始對交互事件進(jìn)行設(shè)置,這里需要給頁面加入交互事件,首先是第一個(gè)判斷條件,使用函數(shù)判斷窗口距離,如下圖所示。
7、然后設(shè)置第一個(gè)動態(tài)面板移動的絕對位置,如下圖所示。
8、然后設(shè)置第二動態(tài)面板隱藏,如下圖所示。
9、同上的方式,做第二個(gè)判斷條件,并對兩個(gè)動態(tài)面板的交互進(jìn)行設(shè)置,如下圖所示。
10、最后一步,因?yàn)槭谴翱跐L動的效果,所以需要再拖入一個(gè)矩形,并將矩形拉長一些,這樣瀏覽的時(shí)候窗口就有滾動條了,如下圖所示。
11、好了,工作準(zhǔn)備完成,f5預(yù)覽一下效果,試著滾動鼠標(biāo),這些信息欄會消失,導(dǎo)航欄會吸附到最上面。
新聞熱點(diǎn)
疑難解答
圖片精選