Axure原型工作如何制作頂部吸附交互效果
我們在日常瀏覽網頁的時辰，會發現上面的導航欄一向連結不動，而下面的內容會跟著滾動條的拖動而滑動，這個結果就是所謂的頂部吸附的結果，下面小編就介紹一下Axure原型工作若何建造頂部吸附交互結果。
東西/原料
- 電腦
- Axure
方式/步調
- 1
起首新建一個空白頁面，在工作區域拖入本次要利用的元件元素，幾個矩形和幾個動態面板就可以了，如下圖所示。
- 2
然后我們對元件元素的樣式進行調整，并對里面的描述文字進行編寫，如下圖所示。
- 3
這一步需要對兩個動態面板的名稱進行設置，一個是上面的信息展示，一個是下面的導航信息，如下圖所示。定名沒有要求，想叫什么都可以。
- 4
打開動態面板，將兩個矩形復制到動態面板中，如下圖所示。
- 5
下面一步需要將兩個動態面板的固心猿意馬到瀏覽器這一項進行設置，程度要固心猿意馬到居中位置，垂直要在上，如下圖所示。
- 6
元件相關樣式及屬性設置完當作后，起頭對交互事務進行設置，這里需要給頁面插手交互事務，起首是第一個判定前提，利用函數判定窗口距離，如下圖所示。
- 7
然后設置第一個動態面板移動的絕對位置，如下圖所示。
- 8
然后設置第二動態面板埋沒，如下圖所示。
- 9
同上的體例，做第二個判定前提，并對兩個動態面板的交互進行設置，如下圖所示。
- 10
最后一步，因為是窗口滾動的結果，所以需要再拖入一個矩形，并將矩形拉長一些，如許瀏覽的時辰窗口就有滾動條了，如下圖所示。
- 11
好了，工作籌辦完當作，f5預覽一下結果，試著滾動鼠標，這些信息欄會消逝，導航欄會吸附到最上面。
注重事項
- 這個結果的方式相對較難，需要用到函數
- 同樣需要節制好位置，多加操練就會知道了
- 更多好玩的Axure經驗接待存眷小編一路進修
- 發表于 2018-12-18 00:00
- 閱讀 ( 761 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章