整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在日常交互場景中，我們經(jīng)常會使用【返回頂部】或者【錨點定位】功能，來快速到達(dá)自己想去的頁面，那么如何使用 Axure 實現(xiàn)這一交互效果呢，本文將利用 Axure 中【滾到元件】的交互去實現(xiàn)這兩個功能。
這個功能在日常使用中非常常見，其實最簡單的方式就三點
1、默認(rèn)隱藏【返回頂部】；
2、頁面向下滑動一定距離后顯示【返回頂部】；
3、點擊【返回頂部】返回到頁面頂部
接下來開始動手做吧:
最上面的矩形作為頂部內(nèi)容，再畫一塊矩形拉長頁面，最后用一個動態(tài)面板畫一個回到頂部的按鈕。
首先頁面是可以持續(xù)滾動的，而【返回頂部】的按鈕是固定在頁面上的，所以需要對按鈕所在的【動態(tài)面板】配置【固定到瀏覽器】
接下來給【動態(tài)面板】設(shè)置【單擊】【滾動到原件】，目標(biāo)為【頂部矩形】
這個時候【返回頂部】的功能就做完了，但是當(dāng)頁面已經(jīng)處于頂部的時候，通常情況下是不需要顯示返回按鈕的，而是當(dāng)頁面向下滑動一定距離后才顯示，所以可以優(yōu)化一下
我們點一下畫布的空白處，給頁面添加【窗口滾動時】的交互，當(dāng)窗口垂直滑動的距離大于頂部矩形高度的手則【顯示】 【動態(tài)面板】 ，否則就【隱藏】
交互設(shè)置完成之后我們再去默認(rèn)隱藏【動態(tài)面板】就完成了
當(dāng)網(wǎng)頁內(nèi)容較長時，通過設(shè)置錨點，用戶可以通過點擊鏈接直接跳轉(zhuǎn)到頁面的特定區(qū)域。
這種方式不僅提升了頁面的可訪問性，也使得用戶在瀏覽大量信息時更加快捷。
接下來模擬這樣一個場景：四個內(nèi)容四個標(biāo)題，一個動態(tài)面板
然后給動態(tài)面板設(shè)置【單擊】【滾動到原件】的事件，目標(biāo)就是對應(yīng)的標(biāo)題，一 一對應(yīng)設(shè)置好就完成啦
感謝您的閱讀，希望本文能夠啟發(fā)您的設(shè)計靈感，期待在設(shè)計的道路上與您相遇
– 歡迎點贊、關(guān)注、轉(zhuǎn)發(fā)、收藏【我碼玄黃】，gonghao同名
我們打開任何手機app滑動的手勢最多的永遠(yuǎn)是兩種，上下滑動與左右滑動，這個原型是如何在Axure里面怎么體現(xiàn)出來的呢？接下來我就來告訴大家。
要完成這看似簡單的操作，其實還是要有一些技巧的。Axure軟件動態(tài)面板屬性可以滑動，但是滑動的結(jié)果只能是水平和垂直兩種分開的情況。
但是也不是沒有辦法實現(xiàn)同頁面上下、左右滑動這個效果。
主要突破點在對條件的判斷。
我們回想一下使用手機App軟件的情形，按住屏幕不松手指向下滑動屏幕，手機里面頁面只能向下（上）滑動，無論你手再怎么左右滑動，其結(jié)果還是向下（上）滑動；向左右滑動屏幕也是一樣的道理。
所以，手給屏幕一個動作，頁面判斷手滑動屏幕的方向，執(zhí)行手最初始手滑動屏幕方向移動，而且不松手，屏幕移動只能維持豎直或者水平兩種效果，并不能從豎直移動轉(zhuǎn)換到水平移動，除非松手后頁面再次執(zhí)行判斷。即手最開始的動作決定了頁面滑動的方向。
抓住這一點，通過已學(xué)Axure軟件知識點，我想出如下實現(xiàn)該功能方案。
我通過多次嘗試終于測試出一種結(jié)果較為理想的方法：
拖動動態(tài)面板A開始，通過動態(tài)面板C兩個狀態(tài)快速循環(huán)，在其狀態(tài)改變時記錄全局變量x、y，進而判斷拖動動態(tài)面板A時x、y大小從而知道其頁面（動態(tài)面板B）滑動方向。
流程圖如下：
做一個手機外殼，內(nèi)嵌寬高325X575的內(nèi)聯(lián)框架，連接框架到內(nèi)容頁面：
設(shè)置全局變量x、y；
點擊菜單欄中-項目-全局變量，新增兩個全局變量x和y，設(shè)值為空或0；
向新的頁面添加一個帶頁碼的矩形標(biāo)識框，復(fù)制成三份，分別代表第一頁、第二頁、第三頁，名稱分別為1、2、3。
將這三個頁面圈起來—右鍵—轉(zhuǎn)換為動態(tài)面板，設(shè)置該動態(tài)面板名稱為B，再點擊動態(tài)面板B—右鍵—轉(zhuǎn)換為動態(tài)面板，設(shè)置最外層動態(tài)面板名稱為A。
再往動態(tài)面板A外面拖入一個新的動態(tài)面板C,把動態(tài)面板狀態(tài)添加到兩個。
在動態(tài)面板A上設(shè)置如下用例：
拖動開始時：設(shè)置動態(tài)面板C狀態(tài)為Next，向后循環(huán)，間隔2ms（時間要短）；
拖動時：判斷全局變量x，y大小；
x>y時水平移動動態(tài)面板B，x<y時垂直移動動態(tài)面板B；
拖動結(jié)束時：設(shè)置動態(tài)面板C停止循環(huán)。
在動態(tài)面板C上設(shè)置用例
狀態(tài)改變時：設(shè)置全局變量值。
x=[[math.abs(math.ceil(TotalDragX))]]，y=[[math.abs(math.ceil(TotalDragY))]]
點擊菜單欄發(fā)布-預(yù)覽即可看到同頁面實現(xiàn)了左右、上下兩種拖動效果。
emmmmmmm覺得看著很不舒服我們可以進一步完善原型：
增加：
在原來的原型基礎(chǔ)上：
水平拖動而言，知道動態(tài)面板B元件的寬高為975X1000，單個矩形頁面寬高為325X1000。所以水平拖動限制邊界范圍為[-650，0]即可滿足水平拖動時不會把頁面拖瀏覽邊框。
同樣的垂直拖動，限制邊界范圍為[-500，0]即可。
技術(shù)等級】初級
【承接文章】《CSS段落行高，竟然能夠?qū)崿F(xiàn)垂直居中功能，神奇的CSS技術(shù)》
本文重點講解CSS技術(shù)中文本樣式的 vertical-align 屬性的詳細(xì)用法。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
vertical-align屬性的用法較為復(fù)雜，該屬性的取值較多，不了解這個屬性用法的學(xué)習(xí)者，一定要堅持把這篇文章讀完。
一、設(shè)置垂直方向的對齊方式：
CSS技術(shù)利用 vertical-align 屬性來設(shè)置內(nèi)聯(lián)元素的垂直對齊方式
該屬性的功能是：設(shè)置內(nèi)聯(lián)元素或內(nèi)聯(lián)塊元素相對于所在行其他元素的垂直對齊方式。這里在對齊時，都是考慮基線的對齊，即內(nèi)聯(lián)元素的基線相對于所在行其他元素的基線的垂直對齊方式。
這里需要注意的一定要是“內(nèi)聯(lián)元素”或“內(nèi)聯(lián)塊元素”。
【有關(guān)“內(nèi)聯(lián)元素”的知識，可以參考小海老師前面寫的《CSS段落對齊方式，系統(tǒng)認(rèn)識塊級元素與內(nèi)聯(lián)元素，CSS前端進階篇》一文】
該屬性的取值可以有以下幾種：
帶有單位的數(shù)值，可以取負(fù)值，在基線對齊的基礎(chǔ)上，內(nèi)聯(lián)元素向下移動一定的距離（正值）或者向上移動一定的距離（負(fù)值）。
%，可以取負(fù)值，在基線對齊的基礎(chǔ)上，內(nèi)聯(lián)元素向下移動line-height屬性的百分比的距離（正百分比）或者向上移動line-height屬性的百分比的距離。
baseline，【默認(rèn)值】基線對齊，內(nèi)聯(lián)元素的基線與所在行的其他元素的基線對齊。
sub，上標(biāo)。
super，下標(biāo)。
top，頂部對齊，內(nèi)聯(lián)元素的頂部與所在行的其他元素中最高的元素的頂部對齊。
text-top，文本頂部對齊，內(nèi)聯(lián)元素的頂部與所在行的文字頂部對齊。
middle，中部對齊，內(nèi)聯(lián)元素的中部與所在行其他元素的中部對齊。
bottom，底部對齊，內(nèi)聯(lián)元素的底部與所在行的其他元素中最低的元素的底部對齊。
text-bottom，文本底部對齊，內(nèi)聯(lián)元素的底部與所在行的文字底部對齊。
二、基線垂直對齊：
要想深入了解vertical-align屬性各項取值的含義，首先，讓我們先看一看什么是基線對齊。
例1：在段落標(biāo)記<p></p>內(nèi)部，放置一個圖片和一行文字。HTML代碼如下。
<p>
<img src="images/a.jpg" /> 小海前端
</p>
得到的效果如下圖所示，仔細(xì)觀察下圖：圖片底部和文字底部是對齊的嗎？
例1的最終效果
仔細(xì)觀察，其實它們底部并沒有完全對齊。如果將文字的字號放大，可以看得更加明顯。
將例1中的文字放大后的效果
上圖中，由于文字字號的變大，在圖片中只呈現(xiàn)了一個“小”字，但是我們完全可以看出，圖片的底部并沒有和文字的底部對齊。而對齊文字的這個位置實際上是文字的“基線”。
【有關(guān)“基線”的知識，可以參考小海老師前面寫的《CSS段落行高，竟然能夠?qū)崿F(xiàn)垂直居中功能，神奇的CSS技術(shù)》一文】
原來，圖片本身屬于內(nèi)聯(lián)元素，而 內(nèi)聯(lián)元素的vertical-align屬性的默認(rèn)取值為baseline，即基線對齊，也就是圖片的基線（底部）默認(rèn)和文字的基線對齊了。
三、取值為“帶有單位的數(shù)值”：
如果vertical-align屬性的取值為帶有單位的數(shù)值，則也是在基線對齊的基礎(chǔ)上開始上下移動一定的距離。
如果圖片的vertical-align屬性取值為0px，則依然為基線對齊的位置。
如果圖片的vertical-align屬性取值為5px，則在基線對齊位置的基礎(chǔ)上向下移動5px的距離。
如果圖片的vertical-align屬性取值為-5px，則在基線對齊位置的基礎(chǔ)上向上移動5px的距離。
四、取值為“百分比 ”：
如果vertical-align屬性的取值為百分比，則也是在基線對齊的基礎(chǔ)上開始上下移動一定的距離。
那么，問題來了。
百分比意味著移動多少像素的距離呢？
百分比又是以什么距離為基準(zhǔn)的呢，即誰的百分比呢？
我們前端開發(fā)工程師一定要記住：vertical-align屬性的百分比取值不是父元素高度的百分比，而是 line-height 屬性取值的百分比。
即：vertical-align屬性的百分比取值是以line-height屬性的取值為基準(zhǔn)的，及移動距離為vertical-align屬性的絕對值乘以line-height屬性取值的距離數(shù)。
假設(shè)：容器的line-height屬性取值為20px，則：
如果圖片的vertical-align屬性取值為0%，則依然為基線對齊的位置。
如果圖片的vertical-align屬性取值為50%，則在基線對齊位置的基礎(chǔ)上向下移動(20px*50%)的距離，即向下移動10px。
如果圖片的vertical-align屬性取值為-50%，則在基線對齊位置的基礎(chǔ)上向上移動(20px*50%)的距離，即向上移動10px。
五、取值為top和text-top：
例2：我們在例1的基礎(chǔ)上在段落<p></p>中再添加一個圖片，并設(shè)置圖片的高度大于文本。
仔細(xì)閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
從代碼中可以看出，文字“小海前端”左側(cè)的圖片設(shè)置了vertical-align屬性，并取值為top。根據(jù)文字“小海前端”左右的兩張圖片的width屬性可知，右側(cè)圖片的高度肯定比較高。
效果如下圖所示。
例2的最終效果
原因是：vertical-align屬性取值為top是指讓設(shè)置了該屬性的元素頂部和同行周圍元素中最高元素的頂部對齊。從圖中可知，顯然最高的元素是右側(cè)的圖片，因此就呈現(xiàn)為上圖中的外觀了。
而右面的圖片沒有設(shè)置vertical-align屬性，因此依然為“基線對齊”，即右側(cè)圖片的底部對齊文字的基線。
例3：在例2的基礎(chǔ)上，我們將右側(cè)圖片的高度縮小至比文字還小的程度，那可想而知，左側(cè)圖片就應(yīng)該與文字頂部對齊了。
仔細(xì)閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />
</p>
從代碼中可以看出，右側(cè)圖片的寬度由500改為了100，同時高度也會隨之等比縮小。
最終效果如下圖所示：
例3的最終效果
例4：在例2的基礎(chǔ)上，我們調(diào)整左側(cè)圖片vertical-align屬性的取值為text-top，則HTML代碼如下。
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
則最終的顯示效果如下圖所示。
例4的最終效果
原因是：text-top屬性是要求內(nèi)聯(lián)元素與同行內(nèi)文本的頂部對齊。因此，就出現(xiàn)了上圖中的效果。
而右面的圖片沒有設(shè)置vertical-align屬性，因此依然為“基線對齊”，即右側(cè)圖片的底部對齊文字的基線。
vertical-align屬性還具備bottom和text-bottom取值，和這兩個頂部對齊（top和text-top）的含義是類似的，希望同學(xué)們自己在電腦上嘗試一下。
下一篇文章中，小海老師會為大家講解一個vertical-align屬性和line-height屬性的應(yīng)用，用于去掉圖片在容器中放置時，底部產(chǎn)生的小距離。這是前端開發(fā)中非常經(jīng)典的bug解決方案，對于希望深入了解前端開發(fā)的學(xué)習(xí)者真的是非常重要。
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上所寫的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。小海老師非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”，因為這些文章都是連載的，并且是經(jīng)過我精心整理和系統(tǒng)歸納過的。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
