第一步:昆明網站制作小編將準備好的feedback_normal.jpg、mobile_normal.jpg和back2top_normal.jpg 三張圖像素材拖放到Axure設計區域,見圖39,并分別給三張圖像添加鼠標懸停時的交互樣式,見圖40。
(圖39)
(圖40)
第二步:同時選中這三個圖像部件,單擊右鍵,在彈出的關聯菜單中選擇【轉換為動態面板】并給其命名為scroll2top,右鍵單擊該動態面板,在彈出的關聯菜單中選擇【固定到瀏覽器】,在彈出的【固定到瀏覽器】對話框中勾選【固定到瀏覽器窗口】,水平固定【右】,邊距【20】,垂直固定【底部】,邊距【20】,如圖41所示。單擊【確定】按鈕關閉【固定到瀏覽器】對話框。
此時,昆明網站建設小編認為scroll2top已經被固定在瀏覽器右下角了,但是由于設計區域中還沒有內容,所以瀏覽器無法滾動,在【部件】面板中拖放一個矩形部件到設計區域,并將其坐標設置為(x:0,y:2000)。
第三步:在【部件】面板中拖放一個熱區部件到設計區域,給其命名為stone_top,并設置其坐標(x:0,y:0),見圖42。
(圖41)
(圖42)
第四步:在【Outline:頁面】面板中雙擊scroll2top動態面板下的【回到頂部】圖像,見圖43,然后在部件【屬性】面板中雙擊【鼠標單擊時】事件,在彈出的【用例編輯器】中新增【滾動到部件<錨鏈接>】動作,在右側的配置動作中勾選stone_top熱區,在底部選擇【僅垂直滾動】,動畫【搖擺】,時間【300】毫秒,見圖44。單擊【確定】按鈕關閉【用例編輯器】。
第五步:在頂部的工具欄中單擊【預覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預覽交互效果。
(圖43)
(圖44)
當前文章標題:案例17:回到頂部交互效果
當前URL:http://www.ccaudelo.com/news/wzzz/3419.html
下一篇:案例18:手風琴菜單交互之第一步