欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Axure怎么制作頂部吸附交互效果的網(wǎng)頁原型?

百度經(jīng)驗   發(fā)布時間:2018-12-18 16:32:22   作者:畢志華1991   我要評論
Axure怎么制作頂部吸附交互效果的網(wǎng)頁原型?我們在瀏覽網(wǎng)頁的時候,會發(fā)現(xiàn)網(wǎng)頁有很多效果,想要制作一個頂部吸附交互效果,該怎么實現(xiàn)呢?下面我們就來看看詳細的教程,需要的朋友可以參考下

我們在日常瀏覽網(wǎng)頁的時候,會發(fā)現(xiàn)上面的導航欄一直保持不動,而下面的內(nèi)容會隨著滾動條的拖動而滑動,這個效果就是所謂的頂部吸附的效果,該怎么使用axure制作這個交互效果呢?下面我們就來看看詳細的教程。

1、首先新建一個空白頁面,在工作區(qū)域拖入本次要使用的元件元素,幾個矩形和幾個動態(tài)面板就可以了,如下圖所示。

2、然后我們對元件元素的樣式進行調(diào)整,并對里面的描述文字進行編寫,如下圖所示。

3、這一步需要對兩個動態(tài)面板的名稱進行設置,一個是上面的信息展示,一個是下面的導航信息,如下圖所示。命名沒有要求,想叫什么都可以。

4、打開動態(tài)面板,將兩個矩形復制到動態(tài)面板中,如下圖所示。

5、下面一步需要將兩個動態(tài)面板的固定到瀏覽器這一項進行設置,水平要固定到居中位置,垂直要在上,如下圖所示。

6、元件相關樣式及屬性設置完成后,開始對交互事件進行設置,這里需要給頁面加入交互事件,首先是第一個判斷條件,使用函數(shù)判斷窗口距離,如下圖所示。

7、然后設置第一個動態(tài)面板移動的絕對位置,如下圖所示。

8、然后設置第二動態(tài)面板隱藏,如下圖所示。

9、同上的方式,做第二個判斷條件,并對兩個動態(tài)面板的交互進行設置,如下圖所示。

10、最后一步,因為是窗口滾動的效果,所以需要再拖入一個矩形,并將矩形拉長一些,這樣瀏覽的時候窗口就有滾動條了,如下圖所示。

11、好了,工作準備完成,f5預覽一下效果,試著滾動鼠標,這些信息欄會消失,導航欄會吸附到最上面。

以上就是Axure頂部吸附交互效果的制作方法,希望大家喜歡,請繼續(xù)關注腳本之家。

相關推薦:

axure怎么給文字設置跑馬燈效果?

axure怎么設計菜單橫向隱藏與顯示的效果?

Axure RP8怎么設計倒計時獲取短信驗證碼效果?

相關文章

  • Axure怎么制作控制條控制地圖放大效果?

    Axure怎么制作控制條控制地圖放大效果?Axure中想要制作一個地圖放大效果,并且可以使用控制條控制,下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-12-11
  • Axure怎么制作模擬地圖放大效果?

    Axure怎么制作模擬地圖放大效果?Axure中制作網(wǎng)頁原型的時候,想要制作模擬百度底乳放大縮小的效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-12-07
  • Axure怎么制作圖片局部放大的效果?

    Axure怎么制作圖片局部放大的效果?Axure中想要制作圖片局部放大的效果,該怎么制作呢?下面我們就來看看Axure局部放大效果的制作方法,需要的朋友可以參考下
    2018-12-06
  • Axure怎么制作翻轉效果的手機引導頁?

    Axure怎么制作翻轉效果的手機引導頁?Axure中想要制作一個引導頁,該怎么制作翻轉效果的引導頁呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-12-03
  • Axure怎么制作滑動引導頁效果的原型?

    Axure怎么制作滑動引導頁效果的原型?Axure中設計網(wǎng)頁原型很簡單,想要制作一個華東的引導頁,該怎么制作這個動搖交互效果呢?需要的朋友可以參考下
    2018-12-03
  • Axure怎么設計調(diào)整屏幕亮度效果的效果?

    Axure怎么設計調(diào)整屏幕亮度效果的效果?Axure設計網(wǎng)頁原型很簡單,想要制作一個調(diào)整屏幕亮度的交互效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-11-30
  • Axure怎么制作手機充話費的界面效果?

    Axure怎么制作手機充話費的界面效果?經(jīng)常使用網(wǎng)絡充值話費,想要制作話費充值頁面,該怎么制作呢?下面我們就來看看axure制作話費充值界面的教程,需要的朋友可以參考下
    2018-11-29
  • Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果?

    Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果?Axure中想要制作一個數(shù)字遞加遞減的效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-11-28
  • Axure怎么制作文字滾動的動態(tài)效果?

    Axure怎么制作文字滾動的動態(tài)效果?Axure中想要制作一個滾動字幕,該怎么給文字添加滾動效果呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-11-28
  • Axure怎么制作云層滾動的動態(tài)效果?

    Axure怎么制作云層滾動的動態(tài)效果?Axure中想要制作一個云層效果,并添加翻滾的動態(tài)效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-11-27

最新評論