這篇教程我要給大家講的是，axure rp7.0中window函數(shù)的應(yīng)用，window函數(shù)包含了幾個(gè)函數(shù)，有興趣的可以去看axure7.0教程（八）元件函數(shù)、窗口函數(shù)、鼠標(biāo)函數(shù)和數(shù)字函數(shù)的介紹。

今天，我們先講一下window函數(shù)屬性之一ScrollY（縱向滾動(dòng)）的使用方法。那么，結(jié)合scrollY我們來(lái)嘗試實(shí)現(xiàn)Html5網(wǎng)站中，右側(cè)錨記的效果。不清楚的可以去找一些Html5的網(wǎng)站看一下。用語(yǔ)言來(lái)描述就是在網(wǎng)站的右側(cè)幾個(gè)圓點(diǎn)，每當(dāng)向下滾動(dòng)一頁(yè)，相對(duì)應(yīng)的圓點(diǎn)顏色會(huì)變深，點(diǎn)擊其中任意一個(gè)圓點(diǎn)時(shí)，會(huì)滾動(dòng)到頁(yè)面相應(yīng)的部分。

本教程示例原型下載：axure7.0教程_小樓作品（十二）HTML5多級(jí)錨記.rp

好了，我們開(kāi)始準(zhǔn)備元件，來(lái)實(shí)現(xiàn)這個(gè)效果！

1、? 右側(cè)的錨記圓點(diǎn)我們準(zhǔn)備4個(gè)，分別代表第一、二、三、四頁(yè)；

2、? 左側(cè)拖入5個(gè)文本面板，分別放在每一頁(yè)的起始位置，這里設(shè)置每頁(yè)高度600px，也就是說(shuō)頁(yè)面一的文本面板坐標(biāo)0,0，頁(yè)面二的文本面板坐標(biāo)0,600，頁(yè)面三的文本面板坐標(biāo)0,1200，頁(yè)面四的文本面板坐標(biāo)0,1800，最后一個(gè)文本面板作為頁(yè)面底部，坐標(biāo)0,2400；

3、? 把每一個(gè)元件都設(shè)置好標(biāo)簽，以便添加事件時(shí)易于查找。

只需要這些元件我們就能夠?qū)崿F(xiàn)效果了。

下面開(kāi)始說(shuō)實(shí)現(xiàn)思路：

1、? 每一頁(yè)圓點(diǎn)顏色變深，可以用動(dòng)態(tài)面板多狀態(tài)切換來(lái)實(shí)現(xiàn)，我們先把四個(gè)圓點(diǎn)全部選中，然后轉(zhuǎn)換成動(dòng)態(tài)面板。之后，我們?cè)俳o動(dòng)態(tài)面板多添加3個(gè)空狀態(tài)，不要用復(fù)制；

2、? 然后我們打開(kāi)狀態(tài)1，分別給每個(gè)圓點(diǎn)添加點(diǎn)擊事件，由上到下進(jìn)行分別添加2個(gè)事件：

?

事件一、點(diǎn)擊時(shí)切換到指定狀態(tài)，第一個(gè)設(shè)置為切換動(dòng)態(tài)面板到狀態(tài)1，第二個(gè)設(shè)置為動(dòng)態(tài)面板切換到狀態(tài)2，依此類推

事件二、點(diǎn)擊時(shí)滾動(dòng)到部件，第一個(gè)設(shè)置為滾動(dòng)到第一頁(yè)的文本面板，第二個(gè)設(shè)置為滾動(dòng)到第二頁(yè)的文本面板，依此類推。

3、? 全部設(shè)置完后，我們?nèi)x四個(gè)圓點(diǎn)復(fù)制，然后粘貼到其他的三個(gè)狀態(tài)里，并在粘貼完后，依次在每個(gè)狀態(tài)里改變相應(yīng)圓點(diǎn)的顏色，至此動(dòng)態(tài)面板設(shè)置完畢。

4、? 在頁(yè)面交互（編輯器底部）事件中，有一個(gè)窗口滾動(dòng)時(shí)的事件，在里面我們分別添加滾動(dòng)到每一也時(shí)動(dòng)態(tài)面板的狀態(tài)切換：

用例1：滾動(dòng)小于600時(shí)（第一頁(yè)，[[window.scrolly]]<600），切換動(dòng)態(tài)面板為狀態(tài)1；

用例2：滾動(dòng)大于600并且小于1200時(shí)（第二頁(yè)，[[window.scrolly]]>600 and [[window.scrolly]]<1200），切換動(dòng)態(tài)面板為狀態(tài)2；

用例3：滾動(dòng)大于1200并且小于1800時(shí)（第三頁(yè)，[[window.scrolly]]>1200 and [[window.scrolly]]<1800），切換動(dòng)態(tài)面板為狀態(tài)3；

用例4：滾動(dòng)大于1800時(shí)（第四頁(yè)，[[window.scrolly]]>1800），切換動(dòng)態(tài)面板為狀態(tài)4。

5、把動(dòng)態(tài)面板固定到瀏覽器，這里我們讓它在右下角。

全部完成后，下面就是見(jiàn)證奇跡的時(shí)刻！你做對(duì)了嗎？

作者：小樓