鼠標滾動上下翻頁效果是一種常見的網(wǎng)頁交互設(shè)計，它使得用戶可以通過鼠標滾輪的滾動來實現(xiàn)頁面的上下翻頁操作。本文作者分享了如何在Axure中制作一鼠標滾動上下翻頁的效果，一起來學習一下吧。

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

今天作者就教大家如何在Axure中制作一鼠標滾動上下翻頁的效果，我們會以鼠標滾動切換圖片為案例。

一、效果展示

鼠標向上滾動時，切換查看上一張圖片；

鼠標向下滾動時，切換查看下一張圖片；

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

二、制作教程

1. 材料準備

這個模板我們主要用到中繼器、圖片元件、文本標簽、矩形來制作。

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

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

2）鼠標滾動的動態(tài)面板

因為我們要實現(xiàn)鼠標滾動的交互，一般的元件沒有鼠標向上滾動和向下滾動的交互，所以我們要用動態(tài)面板來制作，只有動態(tài)面板有這個交互。

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

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

2. 設(shè)置交互

1）向下滾動的交互

鼠標向下滾動時，按理來說，我們只需用設(shè)置面板狀態(tài)的交互，就能將圖片設(shè)置到下一個頁面。

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

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

2）向上滾動的交互

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

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

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

3）動態(tài)面板載入時

前面講到我們設(shè)置了中部錨點，要讓滾動條默認滾動到中間錨點的位置。所以在載入時，我們要用滾動到錨點的交互，讓滾動條滾動到中部的位置。這里也有一個問題，因為向下滾動的時候，就會觸發(fā)向下滾動的交互，導(dǎo)致圖片會不停滾動。

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

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

那以上就是本期教程的全部內(nèi)容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。