中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

驗證碼的方式有很多，對于滑塊驗證碼相信大家肯定不會陌生，今天我們一起來用Axure8.0來模擬做一個滑塊驗證碼。

預覽

暫缺，沒找到合適的轉(zhuǎn)換軟件。

一、元件準備

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

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

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

4、添加一個矩形，起名叫“拖動限制”，用來限制“拖動圓球”的起始和終點坐標的；

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

6、在“驗證碼背景”動態(tài)面板中放一個動態(tài)面板，用來存放隨機出現(xiàn)的圖案缺口，起名叫“滑塊標準”；

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

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

9、注意：“滑塊標準”動態(tài)面板和“滑塊”動態(tài)面板中放的圖案大小和樣式必須一致。

二、添加用例

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

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

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

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

（2）操作正確，那么只需要顯示“驗證碼背景”動態(tài)面板即可；

2、鼠標移出時，很簡單，隱藏掉“驗證碼背景”和“滑塊”動態(tài)面板即可；

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

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

三、預覽

好了，預覽一下吧。

（題圖來自 攝圖網(wǎng)，基于 CC0 協(xié)議?）

本文由 @無淚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。