滑動拼圖是互聯(lián)網(wǎng)一種新的驗證形式，被廣泛應(yīng)用在各種網(wǎng)站的登錄、注冊、找回密碼。用戶可以不需要填寫復(fù)雜的驗證碼，而是用鼠標(biāo)去拖動滑塊便能通過驗證。

下面為今日頭條的滑動拼圖驗證，接下來將為大家講解：

一、界面元件搭建（教程為axure 8）

首先，需要下面這些元件。熱區(qū)1和熱區(qū)2是用來校驗小圖的位置是否正確，作為左右的重合區(qū)間。

所有元件的初始位置如下：

二、交互事件實現(xiàn)

（1）選中動態(tài)面板【滑塊】，添加【拖動時】交互事件，勾選【當(dāng)前元件】，設(shè)置為：水平移動，添加左右邊界。

詳細(xì)設(shè)置圖如下：

下圖為左邊界：

下圖為右邊界：300為背景矩形的寬度。

同理，勾選【小圖】，設(shè)置同樣的移動和左右邊界。

其次，增加【滑塊】移動時，【高亮】條的尺寸跟著變化。設(shè)置【高亮】矩形的寬度為：[[LVAR1.x-LVAR2.x]]，其中，LVAR1.x為【滑塊】的X軸坐標(biāo)值，LVAR2.x為【背景】的X軸坐標(biāo)值。

如下圖所示：

最后，需要添加【拖動結(jié)束時】的交互事件。即當(dāng)【小圖】移動到與熱區(qū)1、熱區(qū)2重疊的時候，顯示驗證成功。

如下圖所示：

同理，否則，顯示【失敗】矩形，提示失敗。同時需要觸發(fā)【刷新】按鈕的【鼠標(biāo)點擊事件】，后續(xù)會補(bǔ)充此交互事件。

詳細(xì)交互事件如下：

（2）接下來，需要添加刷新驗證碼的功能，初始元件的位置。

選中【刷新】按鈕，添加【鼠標(biāo)單擊時】交互事件，隱藏【成功】矩形。移動【滑塊】和【小圖】到絕對位置，X軸設(shè)置為[[LVAR1.x]]，其中LVAR1.x為【背景】的的X軸坐標(biāo)值。同時，設(shè)置矩形【高亮】的尺寸為40*40，錨點為左邊。

三、注意事項

（1）熱區(qū)1和熱區(qū)2的位置和寬度，決定著小圖滑動驗證時的準(zhǔn)確率。即與小圖重疊的概率。并且能保證，小圖能同時覆蓋到這兩個熱區(qū)。

（2）添加【滑塊】的右邊界：背景矩形的寬度300也可以替換為函數(shù)LVAR1.width。即為[[LVAR1.x-LVAR1.width]]。更加靈活應(yīng)用。

四、效果展示

如有疑問，歡迎向我留言~

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

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

題圖來自Unsplash，基于CC0協(xié)議