瀏覽網(wǎng)頁時，尤其是互聯(lián)網(wǎng)產(chǎn)品介紹方面的網(wǎng)站，經(jīng)?？梢钥吹?，當你的鼠標停留在某些頁面時，只要輕輕滾動鼠標，頁面就會自動切換，相較于傳統(tǒng)頁面的手動切換可以給用戶更好的體驗。今天就利用Axure8.0向下滾動的交互動作實現(xiàn)滑動鼠標頁面自動切換效果跟大家分享一下。注意Axure7.0沒有向下滾動的交互動作，請大家使用8.0進行同步操作。另外，我將使用幾張圖片來代替頁面進行示范，當然你也可以直接使用頁面。

原材料：

春夏秋冬四張動態(tài)面板以及向?qū)?yīng)的tu1、tu2、tu3、tu4四張小圖作為圖示，注意四張小圖合并在一起的高度要比單張動態(tài)面板的高度小。

方法/步驟

第一步：設(shè)置圖示組和選中狀態(tài)

同時選中圖片tu1、tu2、tu3、tu4—屬性—設(shè)置選項組名稱輸入“示意圖”—選中—勾選線段顏色“黃色”—勾選線寬（選擇較大寬度）—點擊確定

選中tu1—屬性—勾選選中（表示tu1在頁面載入時默認狀態(tài)為選中）

第二步：設(shè)置動態(tài)面板交互動作

依次選中動態(tài)面板chun、xia、qiu、dong，設(shè)置其向下滾動時（不同漢化版本翻譯可能存在差異）的交互動作如下圖。

第三步：設(shè)置圖示的交互動作

依次選中圖示tu1、tu2、tu3、tu4，設(shè)置其鼠標單擊時的交互動作如下。也可以直接復(fù)制動態(tài)面板的向下滾動時的交互動作到圖示的鼠標單擊時，應(yīng)用關(guān)系依次是chun—tu2；xia—tu3；qiu—tu4；dong—tu1.

第四步：調(diào)整元件大小和位置

依次選中動態(tài)面板chun、xia、qiu、dong，縮小其動態(tài)面板的高度，使其高度與四張小圖合并在一起的高度一致。

依次選中動態(tài)面板chun、xia、qiu、dong，單擊鼠標右鍵—滾動條—自動顯示垂直滾動條；完成后你就可以看到動態(tài)面板右邊有一條滾動條出現(xiàn)。

同時選中圖示tu1、tu2、tu3、tu4，單擊鼠標右鍵—順序—置于頂層。

將動態(tài)面板xia、qiu、dong置于chun的下面，使四張動態(tài)面板完全重合地疊加在一起。同時，移動圖示tu1、tu2、tu3、tu4到動態(tài)面板chun的右側(cè)將其滾動條完全遮蓋。至此，已經(jīng)全部完成，如下圖。

本文有一個很遺憾的地方，就是只能實現(xiàn)向下滾動頁面自動切換，無法實現(xiàn)向上滾動頁面自動切換。筆者嘗試過使用同樣的方法設(shè)置向上滾動時的交互動作，但結(jié)果是失敗的，因為動態(tài)面板滾動條性質(zhì)決定了在沒有進行向下滾動時是無法進行向上滾動的。

筆者希望本文能對大家學(xué)習(xí)Axure起到綿薄之力，另外，若有哪位大神知道如何同時實現(xiàn)上下滾動頁面自動切換的希望能告知一下，謝謝！

原型分享

鏈接：http://pan.baidu.com/s/1c2kI5AK密碼：2nf3

本文由 @簡揚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。