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

原材料：

春夏秋冬四張動態面板以及向對應的tu1、tu2、tu3、tu4四張小圖作為圖示，注意四張小圖合并在一起的高度要比單張動態面板的高度小。

方法/步驟

第一步：設置圖示組和選中狀態

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

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

第二步：設置動態面板交互動作

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

第三步：設置圖示的交互動作

依次選中圖示tu1、tu2、tu3、tu4，設置其鼠標單擊時的交互動作如下。也可以直接復制動態面板的向下滾動時的交互動作到圖示的鼠標單擊時，應用關系依次是chun—tu2；xia—tu3；qiu—tu4；dong—tu1.

第四步：調整元件大小和位置

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

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

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

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

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

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

原型分享

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

本文由 @簡揚 原創發布于人人都是產品經理。未經許可，禁止轉載。