起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：滑動(dòng)鼠標(biāo)頁(yè)面自動(dòng)切換（一）
瀏覽網(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沒有向下滾動(dòng)的交互動(dòng)作，請(qǐng)大家使用8.0進(jìn)行同步操作。另外，我將使用幾張圖片來代替頁(yè)面進(jìn)行示范，當(dāng)然你也可以直接使用頁(yè)面。
原材料：
春夏秋冬四張動(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)切換，無法實(shí)現(xiàn)向上滾動(dòng)頁(yè)面自動(dòng)切換。筆者嘗試過使用同樣的方法設(shè)置向上滾動(dòng)時(shí)的交互動(dòng)作，但結(jié)果是失敗的，因?yàn)閯?dòng)態(tài)面板滾動(dòng)條性質(zhì)決定了在沒有進(jìn)行向下滾動(dòng)時(shí)是無法進(jìn)行向上滾動(dòng)的。
筆者希望本文能對(duì)大家學(xué)習(xí)Axure起到綿薄之力，另外，若有哪位大神知道如何同時(shí)實(shí)現(xiàn)上下滾動(dòng)頁(yè)面自動(dòng)切換的希望能告知一下，謝謝！
原型分享
鏈接：http://pan.baidu.com/s/1c2kI5AK密碼：2nf3
本文由 @簡(jiǎn)揚(yáng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
把事情搞復(fù)雜了點(diǎn)，說實(shí)話
預(yù)覽時(shí) 滾動(dòng)一下，他就不停的在無限循環(huán)滾動(dòng)。。。 ? 求解釋，下載了你的發(fā)現(xiàn)也是同樣的問題，難道是我瀏覽器的問題？
你是預(yù)覽我做的，還是你自己做的啊？我的應(yīng)該不會(huì)出現(xiàn)這種情況才對(duì)，試過很多遍了。如果是我做的那個(gè)，那你換個(gè)瀏覽器試試。
預(yù)覽了你的，換了谷歌瀏覽器，都一樣的結(jié)果， ??
谷歌瀏覽器應(yīng)該沒有問題，我得晚上回去才能試試。對(duì)了，你可以自己調(diào)一下，在動(dòng)態(tài)面板顯示這個(gè)交互動(dòng)作前面加一個(gè)等待300mm的動(dòng)作。
加上后效果，第一輪滾動(dòng)正常，再滾動(dòng)還是會(huì)出現(xiàn)，只是延遲了300mm ??
7 里面其實(shí)也有向下滾動(dòng)的交互動(dòng)作 “[[Window.scrollY]]” ，打個(gè)比方，設(shè)置參數(shù)if “[[Window.scrollY]]” > “0”
and “[[Window.scrollY]]” <= "500"，改變面板狀態(tài)即可，用一個(gè)動(dòng)態(tài)面板的不同狀態(tài)就可以實(shí)現(xiàn)了
你可以試一下，看一下效果，而且記得用四張圖片一起試。
鏈接：http://pan.baidu.com/s/1nvReuCh 密碼：2xvn
而且可以解決你的上滑問題
這個(gè)不是我想要的，你這種做法我也想過，但存在缺陷。1.它用了這個(gè)頁(yè)面去做這個(gè)效果，移植性很差，想在哪個(gè)高保真頁(yè)面（尤其是一些產(chǎn)品介紹）幾乎不能用；2.它的鼠標(biāo)滾動(dòng)體驗(yàn)不好，你設(shè)計(jì)時(shí)500像素，經(jīng)常容易發(fā)生滾動(dòng)了但沒有進(jìn)行切換，如果設(shè)置再小一點(diǎn)的話又容易一次滾動(dòng)多張圖片；
那樣子的話用你的方法是不能上滑的，是存在bug？
這是暫時(shí)想不到辦法解決，不過也只有這樣做，才可以把它當(dāng)做一個(gè)模塊，那個(gè)頁(yè)面需要可以直接拿過去用。
失效了~~求鏈接
鏈接：http://pan.baidu.com/s/1sl5r3v3 密碼：mw1l
是建立了四個(gè)春夏秋冬的動(dòng)態(tài)面板？而不是一個(gè)動(dòng)態(tài)面板的四個(gè)狀態(tài)？
還有百度云盤里的原型不存在哎╮(╯▽╰)╭
四個(gè)動(dòng)態(tài)面板
為什么做出來就一個(gè)圖能滑 而且對(duì)比后都一樣 ?
那你下載我的原型文件可以滑動(dòng)嗎？如果可以，那肯定是一些細(xì)節(jié)漏了。
可以的 我兩個(gè)對(duì)比了 都一樣 ??
一個(gè)圖能滑？是從第一張圖直接滑動(dòng)最后一張圖嗎？另外，你用的是Axure8.0嗎？你再認(rèn)真對(duì)一下吧，不只是交互動(dòng)作要對(duì)一下，那些元件名稱也要對(duì)一下。
好吧 我是秋能滑到冬 我是8.0的
那你比一下其他圖片跟秋這張的有什么不同的，應(yīng)該很快就可以找到問題所在的。
?? 一樣都是電腦里的 格式什么都一樣 只有一張比較大 所以優(yōu)化了 不過也不是秋那張
?? 那圖片比動(dòng)態(tài)面板大一點(diǎn)嗎？如果一樣大的話就滑動(dòng)不了。另外你檢查一下動(dòng)態(tài)面板有沒有設(shè)置成自動(dòng)調(diào)整大小，如果設(shè)置了就取消，然后把動(dòng)態(tài)面板的高度縮小一點(diǎn)。
好了 原因是圖片大小比動(dòng)態(tài)模板小了 我拖出去后就對(duì)了 謝謝你 ?? ??
還發(fā)現(xiàn)一個(gè)不足，就是無法點(diǎn)擊滾動(dòng)到的上一張，比如秋滾動(dòng)到冬，然后點(diǎn)擊就無法選定秋
好像真的存在這樣一個(gè)bug，最近比較忙，你可以先思考著怎么解決。多謝提出~
遇到了跟你一樣的問題，但是我不太懂前面說的要小圖片拼起來要比動(dòng)態(tài)面板小，但是下面又說把動(dòng)態(tài)面板大小調(diào)到跟小圖片一樣高。我解決不了。
我用的是火狐瀏覽器，華碩的本……其他都挺順暢，就是預(yù)覽那個(gè)卡……生無所戀的感覺！可能跟本本有關(guān)
你安裝的是正版嗎？到官網(wǎng)上從新下一個(gè)
嗯，我最近也在用這個(gè)8.0，很多效果都比上一代有著進(jìn)步，唯一的不足就是預(yù)覽太卡
預(yù)覽卡？應(yīng)該不會(huì)吧，你可以換個(gè)瀏覽器試試。