<rt id="m0csg"><small id="m0csg"></small></rt> <sup id="m0csg"><noscript id="m0csg"></noscript></sup><sup id="m0csg"><noscript id="m0csg"></noscript></sup>
<sup id="m0csg"><div id="m0csg"></div></sup>
<acronym id="m0csg"><div id="m0csg"></div></acronym><acronym id="m0csg"><center id="m0csg"></center></acronym>
<sup id="m0csg"><div id="m0csg"></div></sup>
網站建設
建站資訊Website News

您的位置:主頁 > 營銷知識 > 建站資訊 > Axure教程:屏幕縱向切換

Axure教程:屏幕縱向切換

上海網站建設公司建站資訊2017-09-05

  通過鼠標滾輪的前滾及后滾操作,實現屏幕縱向的上翻頁和下翻頁效果,其實不難。一起來學習吧。


rdJRR1o36u9RXgnZH4Fa


 一、原型效果


FARrIpHYVN30oHDxCdmJ


二、準備工作

  本文原型是在1366*768分辨率下完成的。

 元件

  矩形:2個,矩形1和矩形2。其中,矩形1為頂部導航條,矩形2為底部導航條。兩個矩形的大小都為1366*51。

  圖片:4張,每張大小為1366*589。

  熱區:4個,分別命名為Anchor1、Anchor2、Anchor3、Anchor4。這四個熱區元件用來作為窗口滾動到指定圖片的錨點。大小為50*51。

全局變量

  CurPic:表示當前屏幕顯示的是第幾幅圖片。頁面載入時,這個變量為1,即第一幅圖片。當判斷出是上翻頁、還是下翻頁后,可以根據這個變量,決定下一個頁面。

  CurScrolly:表示當前窗口滾動的縱向坐標。頁面載入時,這個變量為0。鼠標滾輪滾動后,會有一個滾動到的縱向坐標[[Window.scrollY]],比較這個坐標和本變量,就可以判斷出是向下滾輪,還是向上滾輪。

  Lock:表示頁面滾動的鎖定狀態。這個變量為0,表示未鎖定,可以滾動;為1則表示鎖定,頁面不可以滾動了。頁面載入時,這個變量為0。此變量很關鍵,可以防止“窗口滾動時”頻繁被觸發(感興趣的同學可以刪除這個變量,體驗下風中凌亂的效果)。

 三、制作步驟

  1、把元件擺好

  從上到下,首尾相連依次為矩形1(頂部導航)、圖片1、圖片2、圖片3、圖片4、矩形2(底部導航)。Anchor1放在(x=0,y=0)的位置也就是圖片1的左上方,Anchor2放在圖片2的左上方,依次類推。


Uu3i4k6gCRtmL3VnEVgx


  在矩形1(頂部導航)上點擊鼠標右鍵,轉換成動態面板,并設置動態面板固定到瀏覽器左上方。這樣一來,窗口在滾動時,頂部導航會一直保持在瀏覽器頂部。


JCLnhu01yo0Gv8bcf0mB


2、窗口滾動的判斷處理

  對頁面的屬性“窗口滾動時”進行處理。如果窗口滾動后的縱坐標[[Window.scrollY]]大于當前窗口滾動的縱向坐標CurScrolly,則可以判定為向下翻頁。

  如果當前顯示的是圖片1,并且滾動沒有被鎖定:

  則控制窗口垂直滾動到圖片2的錨點Anchor2的位置。同時,也需要設定當前顯示的圖片為圖片2,當前窗口滾動的縱向坐標CurScrolly為Anchor2的位置。還有一個最重要的設定,那就是把滾動鎖Lock鎖上1000毫秒。


RxRZpmyqPWlDdH6Ud8GG



MBp1ZuXzd2ORHKAmIlNd


  如果當前顯示的是圖片2,可以參照上面介紹的圖片1進行類似處理。

  如果窗口滾動后的縱坐標[[Window.scrollY]]小于當前窗口滾動的縱向坐標CurScrolly,上海網站建設,則可以判定為向上翻頁。至于向上翻頁的處理,和向下翻頁類似,這里不再贅述。

  完整處理:


5WH7EWSPCl1LmZINhPyV



Wb7PA9Vla78bXAHmyucu


四、簡單總結

  本原型比較簡單,感興趣的同學可以繼續在此基礎上擴展練習,比如增加可以手動切換圖片的四個點狀按鈕。


rxubT0BwhtYB7sNhO8UZ


  有同學質疑:產品經理是否需要制作復雜的原型呢?交給開發做好了。的確,原型不是萬能的。但是,掌握一些原型制作的技巧,對產品經理來說,無疑是個加分項。

原文標題:Axure教程:屏幕縱向切換
歡迎您訪問,如有疑問請聯系客服
TAG[db:關鍵字],上海網站建設,上海網站制作,上海APP開發

最新案例

相關文章

更多最新文章

網站關鍵詞

上海云軒網絡版權所有 Copyright©2008-2018 http://www.robynfehrman.com All Rights Reserved 備案號:滬ICP備14049216號

自拍一区情侣,偷拍自怕福利亚洲91,美国一区二区三本,国产系列中文字幕,swag麻豆精选在线观看99YP,国内精品久久久久AV福利,亚洲日韩一区二区在线影视,国产模特手机在线观看,国产直播9岁外甥 天美传媒原创华语A 品牌| cl2019 地址一地址二| 午夜探花视频在线观看| 色诱久久AV| 制服ol国产精品| 涩涩爱中文字幕| 外语学习中文字幕| 萌白酱弥漫一毛无线天在线| 30p国产在线视频| 草莓社区2018地址一地址二| 免费香港午夜伦理电影在线观看视频在线| 羽贺空美中文在线观看| 91puppydog第四部晚会认识| 国产av情侣无码 下载| 国产二偷拍视频 迅雷下载 迅雷下载| 国产偷拍1080p种子下载 迅雷下载| 国产私拍直播| qq头像男欧美范| 日本情书电影| 91新人学院派女神 45部| 国产丝瓜视频国产| 日本在线视频国产在线免| 男生和女生app一起差差差| 2021福利电影在线| 国产医生与护士在线完整| 色干国产日韩三级剧情| 国产一区 清纯唯美| 自慰制服国产| 韩国格里芬| 91探花沈公子| 小鸟酱视频最在线看| 国产各种姿势在线视频| 99偷拍精品视频在线观看| 日本午夜寂寞在线观看视频| 黑人街头搭讪素人在线播放| 精东苏小小拍过几部片| pr社网红正在播放| 国产黄3p| 国产剧情办公室系列| 最新国产偷拍情侣视频电| 国产夫妻性虐丝袜舔脚| http://www.fgx88.com http://www.xwq88.com http://www.chemisiers.net http://www.flowersbyelisecolorado.com http://www.hodenet.com http://www.gmf88.com