axure商城

教程:用axure動態面板制作返回頂部按鈕

在很多網站上都有一個“返回頂部“的按鈕。不管屏幕怎么滾動,返回頂部按鈕一直懸浮在固定位置,隨時待命。一旦你點擊它,他就像小火箭一樣,嗖的一下,頁面就回到頁面頂部了!那么這個效果用Axure怎么實現呢?以下是來自小樓老師的一篇教程,趕緊來學一下吧!

Axure動態面板的屬性中有個功能,叫“固定到瀏覽器”,這個功能也可以在動態面板的右鍵菜單中選擇。

如果我們希望頁面上的某個部分,在頁面滾動時保持在原位不動,就需要用到“固定到瀏覽器”的這個功能。

比如,一個“返回頂部“的按鈕一直固定在頁面右下方,距離瀏覽器右邊框100像素和下邊框10像素的位置上。點擊這個按鈕時,整個頁面滾動回頂部。這樣的效果就需要用到上面提到的功能。

其實,Axure“固定到瀏覽器“這個功能,并不是把元件在絕對位置固定,它是相對于瀏覽器的固定,對于頁面來說其實元件是在隨著頁面的滾動而反向移動,形成了一個停留在原位置的視覺效果。所以它是相對固定,相對于瀏覽器邊框的固定。

知道了原理,我們來實現上面說到的這個效果。

Axure案例:固定位置的返回頂部按鈕

首先,我們先完成固定按鈕位置。(圖151)

1、我們先搭建一個簡易的頁面,然后放入一個矩形,改成箭頭樣式,并“轉為動態面板“,命名為”back“。

2、點擊動態面板屬性中的“固定到瀏覽器“,打開設置界面;

3、勾選“固定到瀏覽器窗口“的復選框,開啟設置選項;

4、水平固定中選擇“右“,并設置邊距為”100“px;

5、水平固定中選擇“底部“,并設置邊距為”10“px。

151

(圖151)

然后,添加“返回頂部“按鈕【鼠標單擊時】事件的用例動作;因為當前動態面板中只有一個元件,所以【鼠標單擊時】的事件可以用矩形也可以用動態面板。這里我們使用動態面板的觸發事件。

如果要滾動回頂部,我們需要用一個元件在頂部進行位置定位,滾動時滾動到這個元件的位置上。頁面中,有一個文字為“頂部導航“的占位符元件,它的y軸坐標為”0“,就是在頂部的位置,我們就用它進行頂部位置的定位。

我們為“頂部導航“這個元件命名為”top“,并在用例編輯界面中選擇動作”滾動到元件<錨鏈接>“后,勾選這個元件。在接下來的選項中我們勾選”僅垂直滾動“,如果需要滾動回頂部時有動態的效果,可以繼續選擇【動畫】中的”線性“效果,時間為默認的”500“毫秒即可。這樣就是一個500毫秒勻速滾動回頂部的效果。(圖152)

152

(圖152)

本文轉載自小樓老師的博客:http://www.iaxure.com/3121.html

給TA買糖
共{{data.count}}人
人已贊賞
高級教程

Axure RP 8.0beta初體驗 更快更爽的制作原型

2015-8-17 12:24:02

高級教程

Axure動態面板:實現圖片縮放和進度條加載效果

2015-11-18 17:04:40

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo