制作滑动验证码(未完待续)

前端思路:  1)设置最外层div的宽高(这个我们称为A)

       2)我们在A里面创建20个小的div填充90%的A(我这里是做2排一排10个) (这些div我们统称B)

         3)在B下面加一个div用来存放滑动的图片(这个我们称为C)

      4) 在C下面再加一个div用来放置滑动条

      5)设置鼠标点击滑动条的开始事件(鼠标按下),记录开始时间。

         滑动过程中的事件(移动鼠标),修改C的左间距使它实现滑动效果以及滑动条中滑动按钮的左间距和移动过的距离变色证明已经移动过这些距离,并且判断是否已经拉倒最右边,到最右边左间距不变。

         滑动结束事件(松开鼠标),记录结束时间和左间距传给后台,通过判断做成功提示,判断不通过做清出左间距

后端思路:1)获取验证码图片,其中包括底图(其中有一块需要加阴影算缺失图片),20张小图(有阴影底图切成),阴影的左间距,阴影部分的小图片

     2)验证图片是否对齐

猜你喜欢

转载自www.cnblogs.com/huodetiantang/p/9174611.html