Axure8.0實(shí)例 | 滑塊驗(yàn)證碼

時(shí)間：2023-04-24 00:33:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-04-24 00:33:01 來源：網(wǎng)站運(yùn)營

Axure8.0實(shí)例 | 滑塊驗(yàn)證碼：驗(yàn)證碼的方式有很多，對(duì)于滑塊驗(yàn)證碼相信大家肯定不會(huì)陌生，今天我們一起來用Axure8.0來模擬做一個(gè)滑塊驗(yàn)證碼。

預(yù)覽

https://www.zhihu.com/video/876080369898786816

一、元件準(zhǔn)備

1、添加動(dòng)態(tài)面板三個(gè)，分別用來存放滾動(dòng)的圓塊，驗(yàn)證狀態(tài)和驗(yàn)證碼的背景圖片，分別起名字叫“拖動(dòng)圓球”，“狀態(tài)”和“驗(yàn)證碼背景”。其中“驗(yàn)證碼背景”動(dòng)態(tài)面板隱藏；

2、“拖動(dòng)圓球”動(dòng)態(tài)面板中添加圖片；

3、“狀態(tài)”動(dòng)態(tài)面板設(shè)置三個(gè)狀態(tài)，分別是初始狀態(tài)、錯(cuò)誤狀態(tài)和正確狀態(tài)；

4、添加一個(gè)矩形，起名叫“拖動(dòng)限制”，用來限制“拖動(dòng)圓球”的起始和終點(diǎn)坐標(biāo)的；

5、添加一個(gè)文本標(biāo)簽，在初始狀態(tài)時(shí)，用來提示用的，起名叫“初始提示內(nèi)容”，并將文本標(biāo)簽放到“拖動(dòng)限制”上方；

6、在“驗(yàn)證碼背景”動(dòng)態(tài)面板中放一個(gè)動(dòng)態(tài)面板，用來存放隨機(jī)出現(xiàn)的圖案缺口，起名叫“滑塊標(biāo)準(zhǔn)”；

7、在“驗(yàn)證碼背景”動(dòng)態(tài)面板中放一個(gè)矩形框，用來限制隨機(jī)出現(xiàn)的圖案缺口的位置，起名字叫“邊界”

8、最后，再添加一個(gè)動(dòng)態(tài)面板，用來存放滑塊的，起名叫“滑塊”，初始是隱藏的；

9、注意：“滑塊標(biāo)準(zhǔn)”動(dòng)態(tài)面板和“滑塊”動(dòng)態(tài)面板中放的圖案大小和樣式必須一致。

二、添加用例

用例很少，只有在“拖動(dòng)圓球”動(dòng)態(tài)面板上設(shè)置就可以了，具體設(shè)置如下：

1、首先，在鼠標(biāo)移入“拖動(dòng)圓球”動(dòng)態(tài)面板中時(shí)，需要顯示“驗(yàn)證碼背景”動(dòng)態(tài)面板和“滑塊”動(dòng)態(tài)面板，并且需要隨機(jī)出現(xiàn)“滑塊標(biāo)準(zhǔn)”動(dòng)態(tài)面板，且要控制其不會(huì)出現(xiàn)在“邊界”之外，而且為了便于“滑塊”出現(xiàn)，最好是限制“滑塊標(biāo)準(zhǔn)”動(dòng)態(tài)面板出現(xiàn)在“邊界”的右半部分。同時(shí)顯示“滑塊”動(dòng)態(tài)面板，并且設(shè)置“滑塊”動(dòng)態(tài)面板的x坐標(biāo)為“拖動(dòng)圓球”的x坐標(biāo)，設(shè)置“滑塊”動(dòng)態(tài)面板的y坐標(biāo)為“滑塊標(biāo)準(zhǔn)”動(dòng)態(tài)面板的y坐標(biāo)；

這時(shí)會(huì)有兩種情況，一種是之前有過操作，且正確，另一種情況是初始狀態(tài)或者之前有過操作，但是錯(cuò)誤了，那么我們要根據(jù)“狀態(tài)”動(dòng)態(tài)面板的狀態(tài)判定；

初始狀態(tài)或者之前有過操作，但是錯(cuò)誤了，按照1步驟中的設(shè)置，如圖：
















② 操作正確，那么只需要顯示“驗(yàn)證碼背景”動(dòng)態(tài)面板即可；




2、鼠標(biāo)移出時(shí)，很簡單，隱藏掉“驗(yàn)證碼背景”和“滑塊”動(dòng)態(tài)面板即可；







3、拖動(dòng)“拖動(dòng)圓球”動(dòng)態(tài)面板時(shí)，首先需要隱藏掉“初始提示內(nèi)容”，然后讓“拖動(dòng)圓球”跟隨鼠標(biāo)移動(dòng)，同時(shí)讓“滑塊”動(dòng)態(tài)面板與“拖動(dòng)圓球”動(dòng)態(tài)面板同步滑動(dòng)；































4、拖動(dòng)結(jié)束，判斷“滑塊”動(dòng)態(tài)面板與“滑塊標(biāo)準(zhǔn)”動(dòng)態(tài)面板的是否重合（因?yàn)楹茈y做到完全重合才算正確，所以這里設(shè)置了一定的誤差時(shí)，也會(huì)驗(yàn)證通過），如果重合，那么設(shè)置“狀態(tài)”動(dòng)態(tài)面板為驗(yàn)證通過；如果不重合，那么設(shè)置“狀態(tài)”動(dòng)態(tài)面板為驗(yàn)證錯(cuò)誤，并且將“拖動(dòng)圓球”動(dòng)態(tài)面板還原到初始位置；

三、預(yù)覽

好了，預(yù)覽一下吧。