国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

鼠標(biāo)滾動(dòng)上下翻頁(yè)效果是一種常見(jiàn)的網(wǎng)頁(yè)交互設(shè)計(jì)，它使得用戶可以通過(guò)鼠標(biāo)滾輪的滾動(dòng)來(lái)實(shí)現(xiàn)頁(yè)面的上下翻頁(yè)操作。本文作者分享了如何在Axure中制作一鼠標(biāo)滾動(dòng)上下翻頁(yè)的效果，一起來(lái)學(xué)習(xí)一下吧。

鼠標(biāo)滾動(dòng)上下翻頁(yè)效果是一種常見(jiàn)的網(wǎng)頁(yè)交互設(shè)計(jì)，它使得用戶可以通過(guò)鼠標(biāo)滾輪的滾動(dòng)來(lái)實(shí)現(xiàn)頁(yè)面的上下翻頁(yè)操作。這種效果通常應(yīng)用于多圖片、或長(zhǎng)頁(yè)面分頁(yè)瀏覽的情況，使得用戶可以方便地快速瀏覽內(nèi)容，提高用戶的交互體驗(yàn)。

今天作者就教大家如何在Axure中制作一鼠標(biāo)滾動(dòng)上下翻頁(yè)的效果，我們會(huì)以鼠標(biāo)滾動(dòng)切換圖片為案例。

一、效果展示

鼠標(biāo)向上滾動(dòng)時(shí)，切換查看上一張圖片；

鼠標(biāo)向下滾動(dòng)時(shí)，切換查看下一張圖片；

循環(huán)效果，如果在最后一張圖片繼續(xù)向下滾動(dòng)，就會(huì)循環(huán)至第一張圖片；如果在第一張圖片繼續(xù)向上滾動(dòng)，就會(huì)循環(huán)值最后一張圖片。

二、制作教程

1. 材料準(zhǔn)備

這個(gè)模板我們主要用到中繼器、圖片元件、文本標(biāo)簽、矩形來(lái)制作。

1）圖片的動(dòng)態(tài)面板

我們先導(dǎo)入一張圖片，導(dǎo)入后鼠標(biāo)右鍵將圖片轉(zhuǎn)為動(dòng)態(tài)面板，然后復(fù)制動(dòng)態(tài)面板的狀態(tài)，有幾張圖片就復(fù)制幾個(gè)狀態(tài)，在每個(gè)狀態(tài)里一次打入對(duì)應(yīng)的圖片，這樣圖片的動(dòng)態(tài)面板就完成了。

2）鼠標(biāo)滾動(dòng)的動(dòng)態(tài)面板

因?yàn)槲覀円獙?shí)現(xiàn)鼠標(biāo)滾動(dòng)的交互，一般的元件沒(méi)有鼠標(biāo)向上滾動(dòng)和向下滾動(dòng)的交互，所以我們要用動(dòng)態(tài)面板來(lái)制作，只有動(dòng)態(tài)面板有這個(gè)交互。

我們?cè)趧?dòng)態(tài)面板里增加一個(gè)矩形，填充顏色為透明色，這樣就不會(huì)遮擋與圖片了。因?yàn)槲覀円鰸L動(dòng)的效果，所以動(dòng)態(tài)面板里面的元件尺寸，一定要比動(dòng)態(tài)面板高，這樣才會(huì)出現(xiàn)滾動(dòng)條。所以我們把矩形的尺寸設(shè)置為19998，2萬(wàn)是axure的極限，反正就是拉到最長(zhǎng)，這樣可以讓他有足夠的滾動(dòng)空間。

動(dòng)態(tài)面板調(diào)出滾動(dòng)條，高度和圖片一致，這里會(huì)默認(rèn)看到滾動(dòng)條，案例中的滾動(dòng)條是默認(rèn)隱藏的，所以我們需要用一個(gè)特殊的操作來(lái)隱藏，我們把動(dòng)態(tài)面板寬拉大，直到滾動(dòng)條在圖片右側(cè)，然后我們?cè)俅螌?dòng)態(tài)面板轉(zhuǎn)為動(dòng)態(tài)面板，這樣就多了一個(gè)外面板，外面板選擇不顯示滾動(dòng)條，寬高和圖片設(shè)置為一樣，放在圖片動(dòng)態(tài)面板上方。這要就即可以有滾動(dòng)效果，但是又不出現(xiàn)滾動(dòng)條。

2. 設(shè)置交互

1）向下滾動(dòng)的交互

鼠標(biāo)向下滾動(dòng)時(shí)，按理來(lái)說(shuō)，我們只需用設(shè)置面板狀態(tài)的交互，就能將圖片設(shè)置到下一個(gè)頁(yè)面。

但是我們?cè)谶@中間遇到了問(wèn)題，這樣寫了之后會(huì)發(fā)現(xiàn)，鼠標(biāo)向下滾動(dòng)，會(huì)有很多張圖片切換，整個(gè)頁(yè)面很亂。這里面的原因是因?yàn)槭髽?biāo)向下滾動(dòng)是一個(gè)持續(xù)值，有些人滾動(dòng)一下可能持續(xù)0.1秒，有些人滾動(dòng)一下可能1秒，就是沒(méi)有辦法一瞬間完成這個(gè)操作，導(dǎo)致這途中觸發(fā)了多次事件。

為了解決這個(gè)問(wèn)題，我們就要做一個(gè)開(kāi)關(guān)來(lái)控制，我們用個(gè)隱藏的文本標(biāo)簽就可以了，默認(rèn)值為0，如果值為0的時(shí)候，就是可以滾動(dòng)切換的狀態(tài)，一開(kāi)始切換的時(shí)候，我們就要把開(kāi)關(guān)的值設(shè)為1，然后在用設(shè)置面板狀態(tài)的交互，設(shè)置到下一頁(yè)，這里需要增加向上滑動(dòng)的動(dòng)畫，動(dòng)畫時(shí)間可以自己設(shè)置，案例中是1秒。然后等待1秒時(shí)間，這里等待時(shí)間和動(dòng)畫時(shí)間應(yīng)該一致。我們?cè)诎验_(kāi)關(guān)的值設(shè)置為0，這樣就相當(dāng)于重新打開(kāi)開(kāi)關(guān)可以繼續(xù)滾動(dòng)切換圖片。

2）向上滾動(dòng)的交互

鼠標(biāo)向上滾動(dòng)是的思路和交互和上面向上滾動(dòng)是的交互基本是一致的，唯一需要改的就是設(shè)置動(dòng)態(tài)面板從下一項(xiàng)變成上一項(xiàng)，動(dòng)畫效果從向上滾動(dòng)變成向下滾動(dòng)。

然后我們會(huì)發(fā)現(xiàn)有一個(gè)問(wèn)題，就是一開(kāi)開(kāi)始進(jìn)入，如果直接向上滾動(dòng)時(shí)沒(méi)有效果的，因?yàn)闈L動(dòng)條已經(jīng)在頂部沒(méi)辦法向上滾動(dòng)，只有先向下滾動(dòng)后才能繼續(xù)向上滾動(dòng)。那如果一開(kāi)始我們就想向上滾動(dòng)該怎么辦呢？因?yàn)樵O(shè)置了循環(huán)，理論上是可以向上滾動(dòng)的。

這里我們要在動(dòng)態(tài)面板內(nèi)矩形上增加一個(gè)錨點(diǎn)，可以用透明的矩形去中，把錨點(diǎn)放在矩形中間的位置就是高10000點(diǎn)的位置，然后讓滾動(dòng)條默認(rèn)滾動(dòng)到中間錨點(diǎn)的位置，這樣向上向下滾動(dòng)都沒(méi)有問(wèn)題了。

3）動(dòng)態(tài)面板載入時(shí)

前面講到我們?cè)O(shè)置了中部錨點(diǎn)，要讓滾動(dòng)條默認(rèn)滾動(dòng)到中間錨點(diǎn)的位置。所以在載入時(shí)，我們要用滾動(dòng)到錨點(diǎn)的交互，讓滾動(dòng)條滾動(dòng)到中部的位置。這里也有一個(gè)問(wèn)題，因?yàn)橄蛳聺L動(dòng)的時(shí)候，就會(huì)觸發(fā)向下滾動(dòng)的交互，導(dǎo)致圖片會(huì)不停滾動(dòng)。

為了防止這種情況，我們可以默認(rèn)把開(kāi)關(guān)控制值設(shè)置為1，這樣圖片就不會(huì)切換了，然后我們等待1毫秒，等待滾動(dòng)到中部結(jié)束，然后用在開(kāi)關(guān)控制值設(shè)置為0，打開(kāi)開(kāi)關(guān)。

這樣我們就制作完成了鼠標(biāo)滾動(dòng)上下翻頁(yè)效果的原型模板了，下次使用時(shí)，只需要在動(dòng)態(tài)面板里修改頁(yè)面信息，替換圖片，如果需要增加文字或者其他內(nèi)容的話，也可以在動(dòng)態(tài)面板對(duì)應(yīng)狀態(tài)里添加，添加完成后預(yù)覽時(shí)就會(huì)自動(dòng)生成效果了，是不是很方便呢？

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。