今天,我們結合浮動固定菜單欄和樓層導航,實現同一界面內的錨點定位。
想必很多人已經見過浮動固定菜單和樓層導航的案例,浮動固定菜單的場景非常的常見,人人都是產品經理的產品經理導航( http://dh.woshipm.com/ )就是一個典型的浮動固定菜單的場景,當窗口向下滾動超過一定距離時,菜單欄固定在瀏覽器窗口的最上方:
當一個頁面內容較多時,我們又經常以樓層的方式快速導航,并且在頁面的右下角有一個返回到頂部的按鈕。單擊對應的樓層按鈕,快速定位到該樓層,這在一些電商網站中出現較多,例如京東網首頁:
今天,我們結合浮動固定菜單欄和樓層導航,實現同一界面內的錨點定位,完成后的效果圖如下:
單擊這里 查看在線演示
從這個例子里,我們可以掌握的知識點有如下幾個:
- 關于動態面板“固定到瀏覽器”屬性的應用
- 浮動固定菜單欄的設置技巧
- 滾動到元件動作的應用
- 窗口滾動時事件的處理
- 自動適應窗口寬度的設置
一、界面布局
1、標題欄
添加一個無邊框灰色矩形框,大小1250*66,命名title,位置在(0,80),模擬菜單欄。
復制這個矩形框,命名為menu,模擬位于頂部的浮動固定菜單,位置在(0,0)右鍵轉換為動態面板,命名為float_title,右鍵設置順序為置于頂層,完成后的效果如下:
2、樓層導航按鈕
添加一個矩形框,大小80*50,雙擊設置文字為“一樓”,右鍵設置交互樣式鼠標經過時填充色為深灰色:
再設置選中狀態的樣式為藍底白字:
復制這個按鈕7個,分別修改文字內容為“二樓”到“八樓”,自上而下順序排列:
給8個按鈕分別命名button1到button8,選中這8個矩形,右鍵設置選項組為buttons:
然后再右鍵轉換為動態面板,命名為float_panel,放在(0,475)處。
3、樓層內容
我們使用大的矩形塊來模擬每一個樓層,添加一個矩形框,大小900*220,雙擊設置文字內容為“一樓”,命名為floor1,復制floor1總共7個(復制這么多是讓窗口在垂直方向有足夠多的樓層,讓頁面出現垂直滾動條),修改名稱分別為“二樓”到“八樓”,依次從上到下排列,間距設置為60。選中這8個矩形,右鍵轉換為動態面板,命名為floors,放在(160,185)處,完成后的效果圖如下:
4、返回頂部按鈕
添加一個矩形,大小70*60,右鍵轉換為動態面板,命名為back_top,移動(1100,754)處,完成后的效果圖如下:
在初始狀態下,頂部浮動固定菜單欄和回到頂部按鈕是不可見的,只有在窗口向下滾動一定距離后才出現,因此我們先將這兩個動態面板隱藏起來(淺黃色部分是隱藏的動態面板):
到這里我們已經完成示例中所有的布局部分,下面來開始處理事件。
二、動態面板屬性設置
有幾個動態面板的“固定到瀏覽器”屬性需要設置一下,以便于在顯示時能按照設置的屬性顯示。
頂部菜單欄的“固定到瀏覽器”屬性:水平居中,垂直居上
左側樓層導航按鈕的“固定到瀏覽器”屬性:水平居左,垂直居中
返回頂部按鈕的“固定到瀏覽器”屬性:水平居右,邊距20,垂直居下,邊距20
三、事件處理
這里包括以下幾個事件需要處理:
1、頁面載入時事件
為了界面更加美觀點,在頁面初始化事件里,我們將菜單欄設置和當前窗口一樣的大小,將樓層內容的大小設置為比窗口寬度小一點并且居中顯示。
因為有8個樓層,我們通過一個全局變量來設置一下值,所有樓層寬度減去這個值,設置統一寬度,全局變量名為distance,默認值為400:
在頁面空白處點擊,在右側屬性里給頁面添加頁面載入時事件:
- 添加頁面載入時事件
- 先顯示左側的樓層導航動態面板
- 設置菜單欄title和隱藏的浮動菜單欄的menu的大小,寬度為窗口寬度Window.width,高度66保持不變
- 設置8個樓層的寬度為窗口寬度關于distance值,即[[Window.width-distance]],高度保持不變為220。
- 移動8個樓層所在的動態面板位置在水平中央位置
- 通過變量設置樓層的水平位置
- 添加局部變量LVAR1,指向樓層所在的動態面板
- 水平位置計算方式為[[(Window.width-LVAR1.width)/2]],即窗口寬度減去樓層寬度再除以2
2、窗口滾動事件
窗口在滾動起過標題欄的位置后,顯示浮動固定菜單欄和返回頂部按鈕:
- 添加窗口滾動時事件
- 添加條件,如果窗口滾動距離Window.scrollYgt;=80
- 則顯示浮動固定菜單欄和回到頂部的按鈕
- 觸發控制按鈕control的單擊事件(見后面說明)
否則就隱藏浮動固定菜單欄和回到頂部的按鈕:
添加個熱點區域control,大小10*10,添加單擊事件,判斷窗口滾動位置,設置對應按鈕為選中狀態:
3、樓層導航按鈕單擊事件
給樓層導航的第一個按鈕添加單擊事件,單擊后滾動元件到頂部菜單title,配合線性動畫:
- 選擇導航一樓按鈕
- 添加鼠標單擊事件
- 設置滾動到元件動作
- 選擇滾動到floor1
- 設置僅垂直滾動,配合線性動畫
- 設置當前按鈕為選中狀態
其它7個按鈕依次選擇滾動到floor2到floor8。
4、回到頂部單擊事件
回到頂部按鈕事件與導航按鈕事件相同,只是滾動到標題欄title:
四、F5預覽
所有布局和事件都已經處理完成,可以F5預覽一下看看效果了!
源文件下載地址: http://pan.baidu.com/s/1boDEPJp
如果覺得有幫助就贊一下哦^_^
本文由 @原型設計工場原創發布于人人都是產品經理。未經許可,禁止轉載。
Tags: 設計
文章來源:http://www.woshipm.com/rp/425850.html