案例17:回到頂部交互效果

  • 2022-04-15 15:34:01
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

第一步:昆明網(wǎng)站制作小編將準備好的feedback_normal.jpg、mobile_normal.jpg和back2top_normal.jpg 三張圖像素材拖放到Axure設計區域,見(jiàn)圖39,并分別給三張圖像添加鼠標懸停時(shí)的交互樣式,見(jiàn)圖40。

11.jpg

(圖39)

11.jpg

(圖40)

第二步:同時(shí)選中這三個(gè)圖像部件,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【轉換為動(dòng)態(tài)面板】并給其命名為scroll2top,右鍵單擊該動(dòng)態(tài)面板,在彈出的關(guān)聯(lián)菜單中選擇【固定到瀏覽器】,在彈出的【固定到瀏覽器】對話(huà)框中勾選【固定到瀏覽器窗口】,水平固定【右】,邊距【20】,垂直固定【底部】,邊距【20】,如圖41所示。單擊【確定】按鈕關(guān)閉【固定到瀏覽器】對話(huà)框。

此時(shí),昆明網(wǎng)站建設小編認為scroll2top已經(jīng)被固定在瀏覽器右下角了,但是由于設計區域中還沒(méi)有內容,所以瀏覽器無(wú)法滾動(dòng),在【部件】面板中拖放一個(gè)矩形部件到設計區域,并將其坐標設置為(x:0,y:2000)。

第三步:在【部件】面板中拖放一個(gè)熱區部件到設計區域,給其命名為stone_top,并設置其坐標(x:0,y:0),見(jiàn)圖42。

11.jpg

(圖41)

11.jpg


(圖42)

第四步:在【Outline:頁(yè)面】面板中雙擊scroll2top動(dòng)態(tài)面板下的【回到頂部】圖像,見(jiàn)圖43,然后在部件【屬性】面板中雙擊【鼠標單擊時(shí)】事件,在彈出的【用例編輯器】中新增【滾動(dòng)到部件<錨鏈接>】動(dòng)作,在右側的配置動(dòng)作中勾選stone_top熱區,在底部選擇【僅垂直滾動(dòng)】,動(dòng)畫(huà)【搖擺】,時(shí)間【300】毫秒,見(jiàn)圖44。單擊【確定】按鈕關(guān)閉【用例編輯器】。

第五步:在頂部的工具欄中單擊【預覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預覽交互效果。

11.jpg

(圖43)

11.jpg

(圖44)


當前文章標題:案例17:回到頂部交互效果

當前URL:http://amzcoolest.com/news/wzzz/3419.html

上一篇:案例16:APP可滾動(dòng)內容的三種常用實(shí)現方法

下一篇:案例18:手風(fēng)琴菜單交互之第一步

網(wǎng)站建設、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專(zhuān)線(xiàn):15368242187(微信同號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看