瀏覽網(wǎng)頁(yè)時(shí)，尤其是互聯(lián)網(wǎng)產(chǎn)品介紹方面的網(wǎng)站，經(jīng)常可以看到，當(dāng)你的鼠標(biāo)停留在某些頁(yè)面時(shí)，只要輕輕滾動(dòng)鼠標(biāo)，頁(yè)面就會(huì)自動(dòng)切換，相較于傳統(tǒng)頁(yè)面的手動(dòng)切換可以給用戶更好的體驗(yàn)。今天就利用Axure8.0向下滾動(dòng)的交互動(dòng)作實(shí)現(xiàn)滑動(dòng)鼠標(biāo)頁(yè)面自動(dòng)切換效果跟大家分享一下。注意Axure7.0沒(méi)有向下滾動(dòng)的交互動(dòng)作，請(qǐng)大家使用8.0進(jìn)行同步操作。另外，我將使用幾張圖片來(lái)代替頁(yè)面進(jìn)行示范，當(dāng)然你也可以直接使用頁(yè)面。
原型分享地址：鏈接：http://pan.baidu.com/s/1c2kI5AK密碼：2nf3
原材料：
春夏秋冬四張動(dòng)態(tài)面板以及向?qū)?yīng)的tu1、tu2、tu3、tu4四張小圖作為圖示，注意四張小圖合并在一起的高度要比單張動(dòng)態(tài)面板的高度小。
方法/步驟
第一步：設(shè)置圖示組和選中狀態(tài)
同時(shí)選中圖片tu1、tu2、tu3、tu4—屬性—設(shè)置選項(xiàng)組名稱輸入“示意圖”—選中—勾選線段顏色“黃色”—勾選線寬（選擇較大寬度）—點(diǎn)擊確定
選中tu1—屬性—勾選選中（表示tu1在頁(yè)面載入時(shí)默認(rèn)狀態(tài)為選中）
第二步：設(shè)置動(dòng)態(tài)面板交互動(dòng)作
依次選中動(dòng)態(tài)面板chun、xia、qiu、dong，設(shè)置其向下滾動(dòng)時(shí)（不同漢化版本翻譯可能存在差異）的交互動(dòng)作如下圖。
第三步：設(shè)置圖示的交互動(dòng)作
依次選中圖示tu1、tu2、tu3、tu4，設(shè)置其鼠標(biāo)單擊時(shí)的交互動(dòng)作如下。也可以直接復(fù)制動(dòng)態(tài)面板的向下滾動(dòng)時(shí)的交互動(dòng)作到圖示的鼠標(biāo)單擊時(shí)，應(yīng)用關(guān)系依次是chun—tu2；xia—tu3；qiu—tu4；dong—tu1。
第四步：調(diào)整元件大小和位置
依次選中動(dòng)態(tài)面板chun、xia、qiu、dong，縮小其動(dòng)態(tài)面板的高度，使其高度與四張小圖合并在一起的高度一致。
依次選中動(dòng)態(tài)面板chun、xia、qiu、dong，單擊鼠標(biāo)右鍵—滾動(dòng)條—自動(dòng)顯示垂直滾動(dòng)條；完成后你就可以看到動(dòng)態(tài)面板右邊有一條滾動(dòng)條出現(xiàn)。
同時(shí)選中圖示tu1、tu2、tu3、tu4，單擊鼠標(biāo)右鍵—順序—置于頂層。
將動(dòng)態(tài)面板xia、qiu、dong置于chun的下面，使四張動(dòng)態(tài)面板完全重合地疊加在一起。同時(shí)，移動(dòng)圖示tu1、tu2、tu3、tu4到動(dòng)態(tài)面板chun的右側(cè)將其滾動(dòng)條完全遮蓋。至此，已經(jīng)全部完成，如下圖。
本文有一個(gè)很遺憾的地方，就是只能實(shí)現(xiàn)向下滾動(dòng)頁(yè)面自動(dòng)切換，無(wú)法實(shí)現(xiàn)向上滾動(dòng)頁(yè)面自動(dòng)切換。筆者嘗試過(guò)使用同樣的方法設(shè)置向上滾動(dòng)時(shí)的交互動(dòng)作，但結(jié)果是失敗的，因?yàn)閯?dòng)態(tài)面板滾動(dòng)條性質(zhì)決定了在沒(méi)有進(jìn)行向下滾動(dòng)時(shí)是無(wú)法進(jìn)行向上滾動(dòng)的。
筆者希望本文能對(duì)大家學(xué)習(xí)Axure起到綿薄之力，另外，若有哪位大神知道如何同時(shí)實(shí)現(xiàn)上下滾動(dòng)頁(yè)面自動(dòng)切換的希望能告知一下，謝謝！
推薦文章：
Axure教程：移動(dòng)端原型頁(yè)面橫縱向滑動(dòng)同時(shí)實(shí)現(xiàn)http://www.itdecent.cn/p/c846c631cb98?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=qq
Axure教程：動(dòng)態(tài)面板實(shí)現(xiàn)廣告循環(huán)播放
